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:
<html>
<head>
<script type="application/x-javascript">

function draw() {
alert("hi");
}


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


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...

http://www.brighthub.com/hubfolio/matthew-casperson/blog/archive/2009/06/29/game-development-with-javascript-and-the-canvas-element.aspx

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