Friday, September 12, 2008

HTML Canvas Element

The canvas html tag element allows web developers to draw graphics in the browser through a scripting language, typically JavaScript.

In this tutorial, we will create a triangle and allow the user to zoom in or zoom out the picture. Before we get started lets set up our environment. All you'll need is your web browser and a text editor.

Open your text editor (notepad will work just fine) and enter the following:
<script type="application/x-javascript">

function draw() {

<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>

This is our template that we will use for the rest of the tutorial. We've added a canvas element and when the HTML body is loaded our draw() function will be called.

If you save the text file and load it in your browser it should print a message box saying 'hi'. If not please re-read the above until you have this working.

Continue to Part 2

1 comment:

Matthew Casperson said...

A nice tutorial series for anyone looking to get more out of the canvas element