CHAPTER 6
Drawing in the Browser
If we wanted an image in a web application, we’d traditionally open our graph-
ics 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 library that’s specifically designed to work with the
canvas to create a bar graph of browser statistics. We’ll also discuss some of
the special fallback challenges that we’ll face because the canvas is more of
a programming interface than an element. Then we’ll look at how to create
the same logo using Scalable Vector Graphics (SVG), an alternative approach
to drawing in the browser. We’ll look at the following features:<canvas> [<canvas><p>Alternativecontent</p></canvas>]
Supports creation of raster-based graphics via JavaScript. [C4, F3, S3.2,
IE9, O10.1, iOS3.2, A2]<svg> [<svg><!--XML content--></svg>]
Supports creation of vector-based graphics via XML. [C4, F3, S3.2, IE9,
O10.1, iOS3.2, A2]Download from Wow! eBook <www.wowebook.com> report erratum • discuss