HTML5: The Missing Manual, 2nd Edition

Chapter 9. Advanced Canvas: Interactivity and Animation

The canvas is a huge, sprawling feature. In the previous chapter, you learned how to draw line art and even create a respectable drawing program in a few dozen lines of JavaScript. But the canvas has more up its sleeve than that. Not only can it show dynamic pictures and host paint programs, but it can also play animations, process images with pixel-perfect control, and run interactive games. In this chapter, you’ll learn the practical beginnings for all these tasks.

First, you’ll start by looking at drawing context methods that let you paint different types of content on a canvas, including images and text. Next, you’ll learn how to add some graphical pizzazz with shadows, patterned fills, and gradients. Finally, you’ll learn practical techniques to make your canvas interactive and to host live animations. Best of all, you can build all of these examples with nothing more than ordinary JavaScript and raw ambition.

Note

For the first half of this chapter, you’ll focus on small snippets of drawing code. You can incorporate this code into your own pages, but you’ll need to first add a <canvas> element to your page and create a drawing context, as you learned on Getting Started with the Canvas. In the second half of this chapter, you’ll look at much more ambitious examples. Although you’ll see most (or all) of the canvas-drawing code that these examples use, you won’t get every page detail. To try out the examples for yourself, visit ...