O'Reilly logo

HTML5 and CSS3 All-in-One For Dummies, 3rd Edition by Andy Harris

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

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

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 ...

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