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

Controlling the display of images using Easel.js and the canvas tag

The JavaScript library Easel.js reduces the complexity of creating animations and rich interactive environments with the canvas tag. In this recipe, we will use a series of images in a single file named "sprites" to show how to use Easel.js to control which graphic image in the sprite is selectively displayed.

Getting ready

You will need to download the Easel.js library or use the copy in the code files for 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; charset=UTF-8"><title> Animating images using BitmapSequence and SpriteSheet</title> ...

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