HTML 5, Part IV: Canvas

One of the hot new elements in HTML5, canvas allows you to draw graphics, generally using javascript. Remember that the canvas tag is not supported by IE8, so you’ll need to provide fallback content, like we did in the HTML5 video section, for IE users.

<canvas id=”id” width=”x” height=”width”> </canvas>

The width and height attributes, shown above, are both optional; unless specified they default to 300 pixels wide by 150 pixels high. You can set these using DOM properties or resize the element using CSS.

The canvas tag has not been implemented consistently between browsers. Notice that this isn’t a self-closing tag; text between the two tags will be ignored, so you would put replacement content there for browsers that do not support the canvas tag; leaving that space blank means that older browsers simply won’t display anything. Safari does not actually require the canvas end tag, but Mozilla does; thus the above style works for both as Safari simply ignores the </canvas>.

The WHATWG page has full documentation for this tag; unlike most other HTML, it requires some scripting to be useful. Rather than fully explore the tag, I thought I’d link to a few interesting sites that use it.

The HTML5 Canvas and Audio Experiment puts on an interesting light show (with sound, if your browser supports the <audio> tag). Notice the fallback text inside the audio tag in the page source, displaying an error message for browsers that don’t support it.

ball game – click the set of two or more balls of the same color to remove them. Can you get them all?

You can even use canvas to play a simplified game of Super Mario Kart!