HTML5 and CSS3, 2nd Edition

Chapter 6Drawing in the Browser

If we wanted an image in a web application, we’d traditionally open our graphics software of choice, create an image, and embed it on our page with an <img> tag. If we wanted animations, we’d use Flash. HTML5’s <canvas> element lets us create images, or even animations, in the browser programmatically using JavaScript. We can use the canvas to create simple or complex shapes or even create graphs and charts without resorting to server-side libraries, Flash, or other plug-ins. Coincidentally, we’ll do both of these things in this chapter.

First, to get familiar with how we use JavaScript and the <canvas> tag, we’ll draw some simple shapes as we construct a version of the AwesomeCo logo. Then we’ll use a graphing ...