This tutorial for Web Designer magazine was created to show how walk cycles can be created for the HTML5 canvas element with the EaselJS library. This fast and efficient library makes it very easy to add content to the Canvas element in a similar syntax to Flash’s ActionScript.
This particular tutorial uses sprite sheets to create the animation and it is played back in time with the keyboard input from the user. Sprite sheets contain whole animations in one image and the image bounds are shifted each frame to give the illusion of animation. This is all built into the EaselJS library, making it very simple to add this kind of content.View Project →