Experimenting with the canvas for a basic walk animation

canvas

Using a sprite with the canvas tag



See the Pen Canvas animation experiement by Jamie Munro

(@endyourif) on CodePen.



drawFrame*

drawImage



The reference to the image to draw

The start x position in the image sprite to use

The start y position in the image sprite to use

The width of the image to pull  in this case each frame is 30 pixels wide

The height of the image to pull  in this case each frame is 45 pixels tall

The x position of where to draw it on the canvas

The y position of where to draw it on the canvas

The width of the frame to draw  typically this will match the width of the image to pull for each frame

The height of the frame to draw  typically this will match the height of the image to pull for each frame



myCanvas.getContext()

context.clearRect();

context.drawImage();

I don't claim to be an animator, Javascript expert, or anything else; I simply wanted to explore thetag in HTML5. In the following article, I demonstrate how to create a simple walking animation using a free sprite that I found on the Internet.Before I show the solution, I'm going to start with the finished product. Like I stated, it's extremely basic and not the most overly exciting thing in the world. But from a person who has been creating web applications for 10 years, I found it pretty cool.To accomplish this, you will need a basic sprite image. Here is the one I used:The above code is by no means optimized and I've pretty much hard-coded everything for this sprite. But let's review the specifics to explain what is happening.The first thing that is done is a new canvas is created and assigned an id. An image is also loaded and hidden that contains the above sprite. In the Javascript, a reference is obtained to this canvas which is then used to retrieve the drawing context. Once you have the context, you can draw images, shapes, text, etc with it. In this scenario, I'm drawing an image onto the canvas.Once the elements are all instantiated in Javascript, I start a basic timer to make the animation move to the left. In this sprite there are 6 pieces to the animation, so once all frames are displayed, the timer is stopped and started again going in the opposite direction. This is repeated endlessly.Instead thefunctions, I first clear the rectangle. If this isn't done, the last frame will stay on the screen  potentially a nice effect, just not in this scenario. Next thefunction is called. It accepts 9 parameters and they do the following:That is the extent of making a basic animation. The next steps are to remove the hard-coded values and make them all variables. Also, it would be best to attempt to buffer the next frame of the animation in the background and then swap the canvases to avoid a "flicker" effect when there is a background image or other things happening on the canvas.To accomplish the above here are some of the key functions used:Converting a sprite image to an animation in HTML5 is as easy as drawing an image on the canvas and adjusting the location of where the x, y coordinates of the next frame to display are.