HTML 5 simple animation

So as it turns out my html /javascript animation is quite different from flash animation. For Practical reasons a client may need or want an HTML 5 animation project done so I am now including a simple animation with HTML 5.

With this example you have to first make a canvas tag. Think of the Canvas tag as the part of screen our animations will show. This is where we will do most of our work . Once we defined a canvas tag in HTML. Make sure that the browser loads all of objects by listening to the load event. you can do this in a number of ways I like the addEventListener method as its close to what I do in Actionscript.

window.addEventListener('load', eventWindowLoaded,false);

Instead of going through the drawing code step by step, I will talk about the reasoning and the design. the Canvas object works in what is called immediate mode. What this boils down to is you have to update the scene every iteration of your game loop, like a flip book. This also means before you draw on the canvas(using the drawing API) you must erase it first or the previous drawn artifact will be there. So in stead of drawing a circle moving you get a snake growing. Here is how I do this

function drawScreen(){

context.clearRect(0, 0, canvas.width, canvas.height);

x+=speed;

context.fillStyle = "#000000";

context.beginPath();

context.arc(x,y,15,0,Math.PI*2,true);

context.closePath();

context.fill();

.

}

note this: call clear rect before you actually draw on the canvas(context.fill).

Here is my simple example the canvas on the bottom is not clearing on each iteration.

example

There are some really cool animations that can be done with the drawing API, but next time I will show you guys animations with actual pictures.