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