Canvas animations in HTML5 relies on the build in double buffering of the canvas element and the built in timers in JavaScript. The following example demonstrates. When the page is loaded, the initializeAnimation function is called. The initializeAnimation function sets some values to some variables and fires the animation by calling the setInterval function. The setInterval function uses JavaScript’s built in timer to repeatable call a given function (in this case drawFrame) at a given interval (in this case 30 milliseconds). The drawFrame function then manipulates the variables and draws the frame. <html> <head> <script language=”javascript”> //Some global initialization. var x, y, xspeed, yspeed, myCanvas, g; function initializeAnimation() { x = 20; y = 30; xspeed = 7; yspeed =[…]

The HTML5 canvas is an excellent way to display vector graphics on the web, that is, images that isn’t made up by pixels, but geometrical shapes, such as lines and boxes. To display a vector image, you will need a canvas tag that defines the size of the image, and some JavaScript code that defines the picture content. This will create a 400×300 pixel image. The ID attribute is used to access the canvas from your script. <canvas id=”myCanvas” width=”400″ height=”300″></canvas> The JavaScript code that you write, is suitable to call from the onLoad event of your page, like so: <html> <head> <script language=”javascript”> function doSomeDrawing(){ } </script> </head> <body onload=”doSomeDrawing();”> <canvas id=”myCanvas” width=”400″ height=”300″></canvas> </body> </html> The rest of[…]