Animating Sprites In HTML5 Canvas

Home » Tutorials » JavaScript » Animating Sprites In HTML5 Canvas

Tutorials / JavaScript
Friday, 5th Oct, 2012

Animating Sprites In HTML5 Canvas

When you want to build your own web games using the HTML5 Canvas element, you will need to find a way to handle your sprites animation. In this article, we will introduce HTML5 Canvas animation and walks you through creating an animation of character walking.

View Demo

If you are new to HTML5 Canvas element, I suggest you to read this article first “HTML5 Canvas For Absolute Beginners“.

We are going to use the following PNG file as source of our sprite sequence:

PNG sprite sequence

HTML5 Structure

<!DOCTYPE html>
    <head>
    	<meta charset="UTF-8" />
        <title>Animating Sprites In HTML5 Canvas | onlyWebPro.com</title>
    </head>
    <body>
        <canvas id="myCanvas" width="100" height="100">
            <!-- Insert fallback content here -->
            Sorry, your browser doesn't support canvas technology
        </canvas>
        <script>
			//Script goes here
		</script>
    </body>
</html>

We will create a canvas for displaying our sprites and set the width, height of the canvas to 100px. Please bear in mind that, the width and height of each frame of the PNG sprite sequence is 100 pixel:

animated_sprites_description

Besides, please remember to assign an id for our canvas element. For this case, we named it as “myCanvas“.

And that’s all for the HTML structure! Now, let’s take a look at the JavaScript section.

JavaScript

<script>
	var width = 100,
		height = 100,
		frames = 4,
		
		currentFrame = 0,
		
		canvas = document.getElementById("myCanvas");
		ctx = canvas.getContext("2d");
		image = new Image()
		image.src = 'sprite.png';
	
	var draw = function(){
		ctx.clearRect(0, 0, width, height);
		ctx.drawImage(image, 0, height * currentFrame, width, height, 0, 0, width, height);
	
		if (currentFrame == frames) {
		  currentFrame = 0;
		} else {
		  currentFrame++;
		}
	}
	
	setInterval(draw, 100);
</script>

As you seen above, the first thing we do in JavaScript section is to define the variables:

width: The width of the canvas.
height: The height of the canvas.
frames: The total frames of the animated sprites.
currentFrame: The current frame of the animated sprites.
canvas: For accessing the rendering context element.
ctx: Render canvas’s context in 2D format.
image: A variable to hold our PNG file.

To animate the sprite, we need just display each frame of the sprite using drawImage() method. The drawImage() is a method that allow us to draw image or video onto canvas. Below is the syntax and parameters of drawImage():

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

Parameter	Description
img	Specifies the image, canvas, or video element to use
sx	Optional parameter. The x coordinate where to start clipping
sy	Optional parameter. The y coordinate where to start clipping
swidth	Optional parameter. The width of the clipped image
sheight	Optional parameter. The height of the clipped image
x	The x coordinate where to place the image on the canvas
y	The y coordinate where to place the image on the canvas
width	Optional parameter. The width of the image to use (stretch or reduce the image)
height	Optional parameter. The height of the image to use (stretch or reduce the image)

Next, we write a conditional statement to check if the currentFrame is less than total frames, then increment the currentFrame. The currentFrame is used to decide which frame of the sprite should we display on the canvas via drawImage() method.

Lastly, we use “setInterval()” to run the draw function every 100 milliseconds.

That’s it! Save your document and run it on supported browser!