Chapter 8. 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.
One of the most important HTML5 tools 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 possible, provided youâre willing to put in a fair bit of work.
In this chapter, youâll learn how to create a ...
Get HTML5: The Missing Manual, 2nd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.