Creating Sprite Animations on the Canvas

For billions of years, sprite sheets have been used to simplify how you can define 2d visuals for video games and (more recently) web sites. Sprites can be used for displaying just a single visual, but they can also be made up of many visuals that you sequentially play back to create an animation. You see sprite sheets all the time, and you probably never even notice.

Take a look at the following sprite sheet:

This sprite sheet is taken from Twitter's implementation of the heart icon. When you click on the heart icon to favorite a tweet, an animation plays. It looks something like this:

The animation you see when you click on the heart icon is made up of the same individual frames you saw in the sprite sheet earlier. Yes, seriously!

In this tutorial, we are going to learn all about how to create an animation from a sprite sheet. The twist is that we will learn how to do that entirely inside the canvas. Also, we won’t be re-creating the Twitter heart/favorite example. Instead, I have something equally exciting…and a whole lot less copyright infringing for us to work on instead.

Onwards!

If you are looking for how to create a sprite animation using CSS (instead of using the canvas), check out this tutorial instead.