HTML5 Part 2: Canvas
Here is a simple example of using the canvas to draw. (I’m attempting to draw the flag of Scotland. Please forgive any inaccuracies.)
In case your browser doesn’t support HTML5, here is a screenshot of what this code produces:
Now let’s walk through the code. First, I create the actual canvas and give it an ID of “myCanvas”. If this code were viewed in a browser that doesn’t support the HTML5 canvas element, it would display “Your browser does not support the canvas tag.” instead of drawing the flag.
Then, I draw the blue rectangle. I use fillStyle to specify the blue color (which is not perfect; apologies to the Scots). I use fillRect to draw the rectangle, specifying the size and position. Calling fillRect(0, 0, 125, 75) means: starting at position (0, 0) – the upper left-hand corner – draw a rectangle with width=125 pixels and height=75 pixels.
Finally, I draw the white X on the flag. I first call beginPath to start the process of painting a path. I specify a lineWidth of 15 pixels (using the guess-and-check method of trying different values until it looked correct) and a strokeStyle of “white” to make the path’s color white. Then I trace out the path using moveTo and lineTo. These methods position a “cursor” for you to draw; the difference is that moveTo moves the cursor without drawing a line and lineTo draws a line while moving. I start by moving to position (0, 0) – the upper left-hand corner – and then drawing a line to (125, 75) – the lower right-hand corner. Then I move to position (125, 0) – the upper right-hand corner – and draw a line to (0, 75) – the lower left-hand corner. Finally, the stroke method actually renders these strokes.
Quick Comparison of Canvas vs. SVG
Scalable Vector Graphics (SVG) is an earlier standard for drawing in a browser window. With the release of HTML5’s canvas, many people are wondering how they compare.
In my eyes, the biggest difference is that canvas uses immediate mode rendering and SVG uses retained mode rendering. This means that canvas directly causes rendering of the graphics to the display. In my code above, once the flag is drawn, it is forgotten by the system and no state is retained. Making a change would require a complete redraw. In contrast, SVG retains a complete model of the objects to be rendered. To make a change, you could simply change (for example) the position of the rectangle, and the browser would determine how to re-render it. This is less work for the developer, but also more heavyweight to maintain a model.
Here is a high-level overview of other differences:
|Abstraction||Pixel-based (dynamic bitmap)||Shape-based|
|Elements||Single HTML element||Multiple graphical elements which become part of the Document Object Model (DOM)|
|Driver||Modified through Script only||Modified through Script and CSS|
|Event Model||User Interaction is granular (x,y)||User Interaction is abstracted (rect, path)|
|Performance||Performance is better with smaller surface and/or larger number of objects||Performance is better with smaller number of objects and/or larger surface|
For a more detailed comparison, I want to point you to some sessions (from which I pulled this fabulous table, with permission): Jatinder Mann’s “Deep Dive Into HTML5 Canvas” from MIX 2011 and John Bristowe’s “An Introduction to HTML5 Canvas”.
Tomorrow, we will discuss the new HTML5 elements <audio> and <video>.
Other blog posts in this series: