HTML5: The Missing Manual

Chapter 6. Basic Drawing with the Canvas

As you learned in Chapter 1, one of HTML5’s goals is to make it easier to put rich applications inside otherwise ordinary web pages. In this case, the word “rich” doesn’t have anything to do with your bank account. Instead, a rich application is one that’s decked out with slick graphics, interactive features, and showy frills like animation.

The most important new tool for rich applications is the canvas, a drawing surface where you can let your inner Picasso loose. Compared with every other HTML element, the canvas is unique because it requires JavaScript. There’s no way to draw shapes or paint pictures without it. That means the canvas is essentially a programming tool—one that takes you far beyond the original document-based idea of the Web.

At first, using the canvas can feel like stuffing your page with a crude version of Windows Paint. But dig deeper, and you’ll discover that the canvas is the key to a range of graphically advanced applications, including some you’ve probably already thought about (like games, mapping tools, and dynamic charts) and others that you might not have imagined (like musical lightshows and physics simulators). In the not-so-distant past, these applications were extremely difficult without the help of a browser plug-in like Flash. Today, with the canvas, they’re all suddenly possible, provided you’re willing to put in a fair bit of work.

In this chapter, you’ll learn how to create a canvas and fill it up with ...