O'Reilly logo

HTML5 Multimedia Development Cookbook by Lee Jordan, Dale Cruse

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Animating a sequence of images using Easel.js and the canvas tag

We can animate image strips called sprites by creating arrays and functions using the Easel.js JavaScript library and then manipulating them with the canvas element. In this recipe, we will animate the same strip but display two differently timed sequences.

Getting ready

Download the code files for this recipe to use the Easel.js framework library as well as supporting files. You will need a recent browser that will display HTML5 elements to view properly and test the code used in this recipe.

How to do it...

Create the opening tags for an HTML5 file. Your code should look similar to the following code block:

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required