Here we will learn to animate a character using a Sprite Sheet and the HTML 5 Canvas feature. We will use layers and transparency to create a parallax effect so our character looks like he’s moving across a dimensional landscape.
First, we found a really nice and simple tutorial to get a stick figure animating. Go through that tutorial, if you are an absolute beginner with HTML 5, read up on the link provided in that tutorial or use the w3 reference. This is also a useful explanation of layering using the Canvas element.
Once you have got that working, head back here and check out my Fiddle.js page for the source code. Feel free to make changes in Fiddle.js to see how it affects the animation!