JavaScript Sprite Animation Tutorial using HTML5 Canvas

From a long time I am posting only about Android. So today I came up with a new interesting tutorial. In this post we will learn JavaScript Sprite Animation. You may have seen JavaScript Sprite Animation many times. All the 2d animations you see in the web most of them are made with JavaScript and HTML5.

We can create really cool animations using JavaScript and HTML5 Canvas. To create our 2D animation we will be using Sprites. If you are not aware with sprites then don’t worry we will be discussing the things from scratch. So lets begin.

First you can see what will be created at the end of this tutorial. See the below animation clip this is actually what we will be creating.

 </p><p>

Now if you liked this animation and want to know how you can also create the same, keep reading 🙂

JavaScript Sprite Animation Video Tutorial

If you are more comfortable in watching a video rather than learning by reading the here is a video explaining this topic as well.

What is Sprite, Spritesheet and Animation?

Sprite

I told you we will be learning JavaScript Sprite Animation. So the first thing we should now that What is a Sprite? Sprite is a normal 2d bitmap image that is considered as a single frame of our animation.

Sprite Sheet

When we club many sprites into a single bitmap we get an spritesheet. So for creating an spritesheet we can use any image editing tools like photoshop, gimp etc. But if you are not good at these just google image search withe the keyword “Spritesheet” and you will get many spritesheets.

Animation

It is basically an illusion we display many image of a sequence rapidly and it feels like it is animating. In this today we will render different sprites to the screens from our SpriteSheet.

Creating JavaScript Sprite Animation Project

We will not be using any special tool or IDE. I am using Google Chrome and Notepad++. And the main thing we need is a SpriteSheet. So I have the following spritesheet. You can use the same also just save the image to your computer.

As you can see in the above image we have 8 columns and 2 rows. The first row is for right movement and the second row is for left.

When our character is moving rightward then we have to display all the 8 sprites one by one repeatedly. And then it will create an animation. So lets begin.

Create a folder in your computer I just created SpriteAnimation. Put the above spritesheet inside the folder.
Now create an HTML file named index.html. And create the basic HTML structure as follows.

<!DOCTYPE html>

<html>

<head>

<title>JavaScript Sprite Animation Tutorial</title>

</head>

<body>

</body>

</html>

Inside body we need an area to render our sprite. For this we will be using HTML5 Canvas. You can easily create a Canvas using the canvas tag.

Inside this canvas we will render our sprite. I have given an id to the canvas because we need to access it in our script. Now below the canvas create a script tag to write the JavaScripts.

//Width and height for our canvas

var canvasWidth = 650;

var canvasHeight = 350;

//the with and height of our spritesheet

var spriteWidth = 864;

var spriteHeight = 280;

//we are having two rows and 8 cols in the current sprite sheet

var rows = 2;

var cols = 8;

//The 0th (first) row is for the right movement

var trackRight = 0;

//1st (second) row for the left movement (counting the index from 0)

var trackLeft = 1;

//To get the width of a single sprite we divided the width of sprite with the number of cols

//because all the sprites are of equal width and height

var width = spriteWidth/cols;

//Same for the height we divided the height with number of rows

var height = spriteHeight/rows;

//Each row contains 8 frame and at start we will display the first frame (assuming the index from 0)

var curFrame = 0;

//The total frame is 8

var frameCount = 8;

//x and y coordinates to render the sprite

var x=0;

var y=0;

//x and y coordinates of the canvas to get the single frame

var srcX=0;

var srcY=0;

//tracking the movement left and write

var left = false;

//Assuming that at start the character will move right side

var right = true;

//Speed of the movement

var speed = 12;

//Getting the canvas

var canvas = document.getElementById('canvas');

//setting width and height of the canvas

canvas.width = canvasWidth;

canvas.height = canvasHeight;

//Establishing a context to the canvas

var ctx = canvas.getContext("2d");

//Creating an Image object for our character

var character = new Image();

//Setting the source to the image file

character.src = "character.png";

Now we will create a function to update the frame index. As you can see a variable named curFrame which is initialized with 0. We have to update it each time we will render a the sprite. So create a function named updateFrame().

function updateFrame(){

//Updating the frame index

curFrame = ++curFrame % frameCount;

//Calculating the x coordinate for spritesheet

srcX = curFrame * width;

}

Now finally we will create the function to render the sprite. We render the image using drawImage() method with the context that has been established for the canvas.

function draw(){

//Updating the frame

updateFrame();

//Drawing the image

ctx.drawImage(character,srcX,srcY,width,height,x,y,width,height);

}

We need to call the draw function repeatedly to continue rendering the sprites on the canvas. This can be done easily by using setInterval method.

setInterval(draw,100);

First parameter is the function name (draw), and second parameter is the interval to call the function. So the above statement will call the draw function after every 100ms.
If you open the your file in browser now you will see something like this.

As you can see we have to clear the already drawn sprite before rendering the new sprite. For this we will use the clearRect() method.
Just put this line inside the updateFrame() function.

ctx.clearRect(x,y,width,height);

And you will see the following.

To add the left and write movement we need to create two move methods. Write the following code.

function moveLeft(){

left = true;

right = false;

}

function moveRight(){

left = false;

right = true;

}

We need to modify the updateFrame() method as follow.

function updateFrame(){

//Updating the frame index

curFrame = ++curFrame % frameCount;

//Calculating the x coordinate for spritesheet

srcX = curFrame * width;

//Clearing the drawn frame

ctx.clearRect(x,y,width,height);

//if left is true and the character has not reached the left edge

if(left && x>0){

//calculate srcY

srcY = trackLeft * height;

//decreasing the x coordinate

x-=speed;

}

//if the right is true and character has not reached right edge

if(right && x<canvasWidth-width){

//calculating y coordinate for spritesheet

srcY = trackRight * height;

//increasing the x coordinate

x+=speed;

}

At last we need to create two buttons left and right, to change the movement and inside the onClick attribute we will call the method moveLeft() and moveRight().

<button onclick='moveRight()'>Right</button>

I have added a background to the canvas to make it look more cool. The final code will look like.

<!DOCTYPE html>

<html>

<head>

<title>JavaScript Sprite Animation Tutorial</title>

</head>

<body>

<button onclick='moveRight()'>Right</button>

var canvasWidth = 650;

var canvasHeight = 350;

var spriteWidth = 864;

var spriteHeight = 280;

var rows = 2;

var cols = 8;

var trackRight = 0;

var trackLeft = 1;

var width = spriteWidth/cols;

var height = spriteHeight/rows;

var curFrame = 0;

var frameCount = 8;

var x=0;

var y=200;

var srcX;

var srcY;

var left = false;

var right = true;

var speed = 12;

var canvas = document.getElementById('canvas');

canvas.width = canvasWidth;

canvas.height = canvasHeight;

var ctx = canvas.getContext("2d");

var character = new Image();

character.src = "character.png";

function updateFrame(){

curFrame = ++curFrame % frameCount;

srcX = curFrame * width;

ctx.clearRect(x,y,width,height);

if(left && x>0){

srcY = trackLeft * height;

x-=speed;

}

if(right && x<canvasWidth-width){

srcY = trackRight * height;

x+=speed;

}

function draw(){

updateFrame();

ctx.drawImage(character,srcX,srcY,width,height,x,y,width,height);

}

function moveLeft(){

left = true;

right = false;

}

function moveRight(){

left = false;

right = true;

}

setInterval(draw,100);

</script>

</body>

</html>

If you are having trouble you can leave your comments below.

So thats for this JavaScript Sprite Animation Tutorial guys. Feel free to ask if having any confusions or doubts regarding this JavaScript Sprite Animation Tutorial. And support us by sharing my tutorials to your social profiles. Thank You 🙂

Belal Khan

Hi, my name is Belal Khan and I am a Google Developers Expert (GDE) for Android. The passion of teaching made me create this blog. If you are an Android Developer, or you are learning about Android Development, then I can help you a lot with Simplified Coding.

Checkout these tutorials as well:

12 thoughts on “JavaScript Sprite Animation Tutorial using HTML5 Canvas”

Mike
March 4, 2016 at 7:51 am
I was able to get your simple email app to work the first try but this is confusing. Explanation is very week and update this code – put that code there but you don’t truly explain where sometimes. Great work man but this one eludes me!
- Belal Khan
  September 4, 2016 at 8:30 am
  Tell me what you found difficult here?
debs
August 10, 2016 at 1:20 am
You are awesome!! I really appreciate your help with this. perfect.
Kar
December 5, 2016 at 1:11 pm
Hi, I was wondering how you would get the image to stop? Like, I would like it to move when holding down button, and to stop when releasing it? Thanks in advance!
Andrew Kehdi
May 17, 2017 at 10:32 pm
i have an error saying “Cannot set property ‘width’ of null” coming from this line of code
canvas.width = canvas.Width;
canvas.height = canvas.Height;
how can i fix this
- Andrew Kehdi
  May 17, 2017 at 10:35 pm
  canvas.width = canvasWidth;
  canvas.height = canvasHeight;
  sorry this was my code. But it still isnt working
Aakash
January 26, 2018 at 1:02 am
Hi Belal,
I found you have done great work, I am trying to create a tetris game for my project but I need to have a sprite base animation. I wast thinking that once the block appear, the animated dog holds the block and the user has to answer simple math question, if the answer is correct he can put the block in right place if he guess the wrong answer the block falls down directly. Can you please help me how to make it possible. if you need i can send my code by mail.
yusuf
June 8, 2018 at 4:15 am
thats is one object animation, how to make two object sprite animation? diffrent image
LarryYoung
August 28, 2018 at 5:00 am
I tried the tutorial. I had to actually shrink the width of my width property to get it to stop moving left. For example, one of my sprite sheets was 1620 px wide. When I used the formula width = spriteWidth/cols, if the answer was say 148.33 I would have to change the spriteWidth/cols property to a straight 145;
I feel like I understand the logic behind this method but I’m not sure why the standard formula is causing the image to move left. The animation happens but part of the next img of the sprite can be seen a little as it moves left every loop. Any ideas?
Javascripter
January 14, 2019 at 2:20 pm
Hi,
Could you help me ? I get my character moving from right to left automatically with clicking anywhere.
I can send you my code, if you’re ok.
Thanks in advance !
nadia
May 8, 2020 at 10:58 am
var sprite = this(my_shape1);
error ? why?
Hugh
March 30, 2021 at 6:55 pm
Great work! Good explanation.
Thank you.

JavaScript Sprite Animation Tutorial using HTML5 Canvas

JavaScript Sprite Animation Video Tutorial

What is Sprite, Spritesheet and Animation?

Sprite

Sprite Sheet

Animation

Creating JavaScript Sprite Animation Project

Related

Checkout these tutorials as well:

12 thoughts on “JavaScript Sprite Animation Tutorial using HTML5 Canvas”

Leave a Comment Cancel reply