Chapter 7

Animation with the Canvas

In This Chapter

arrow Working with images

arrow Managing transformations

arrow Handling keyboard input

arrow Building basic animations

The <canvas> tag (introduced in Chapter 6 of this minibook) adds some long-needed graphical support to HTML. In this chapter, you see how to extend these ideas to create interesting animations and even user interaction.


Transformations are math operations that can be applied to any drawing or image to change the appearance. There are three major transformations:

  • translation: Move a particular amount in X and Y
  • rotation: Rotate around a particular point
  • scale:Change the size of the drawing in X and Y

The <canvas> element allows all these operations on any type of drawing. However, the way the <canvas> element does this gets a little closer to math than you may have gotten before. Transformations in the canvas element can be hard to understand until you understand a little about how they really work.

In math, you don't really transform objects. Instead, you modify the coordinate system, and draw your image in the newly ...

Get HTML5 and CSS3 All-in-One For Dummies, 3rd Edition now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.