Posted on April 19, 2010
Understanding the canvas in HTML5
Last week I tried to summarize key points about HTML5, the emerging standard that will affect the way Web pages — and other digital media — are created in the near future.
There were two aspects of HTML5 that I mostly left out. One is mobile (the interaction of HTML5 and the Internet on your phone). The other is how animated graphics and data visualizations will be handled natively in HTML5.
Today I’m going to tackle the graphics piece. In a later post, I will deal with mobile.
HTML has tags — such as <img> and <p> — which are used to indicate structural elements in a document, such as images and paragraphs. HTML5 retains many of the common tags and adds some new ones, such as <video> and <canvas>.
First, the canvas element does NOT replace regular images. We will still use the <img> tag to indicate photographs and illustrations, static maps and diagrams, in our Web pages.
Second, the canvas element is the specific part of HTML5 that is discussed as a replacement for the Flash Player plugin. (Note that video would NOT be handled by canvas in HTML5.)
I have been bookmarking some good resources about canvas in my Delicious, with the tags canvas + html5. I’m trying to keep the list small and useful.
So, what can the canvas do?
At its most basic, the tag sets out an area on the page (or screen) by setting a width and a height:
<canvas width="300" height="100"> </canvas>
You wouldn’t see anything but blank space. But you could use CSS to style that space — adding a border, for example. The border would enclose an area 300 pixels wide and 100 pixels high.
If you add something in between <canvas> and </canvas>, that is the “fallback content.” It will be visible only if the canvas element is not recognized by the client application — the Web browser.
So far, you’ve seen nothing new. Now I’ll add a necessary attribute — the ID.
<canvas id="tester" width="300" height="100"> </canvas>
It still does not do anything, but now it’s ready to do something.
It’s not trivial to build an animation like this in Flash, I will readily admit. But you would not have to write any script to do it. Moreover, you would not need to upload 23 PNG files (total weight: 35.9 KB) to make the little guy in the red hat.
Data and the canvas element
Loading XML data into Flash files became about a hundred times easier with the advent of ActionScript 3.0. Flash can also “communicate via RTMP, HTTP, AMF, SOCKET to a wide range of server-side technologies” (source). How will canvas handle data inputs?
I’m not clear on this, but I think new APIs will have to be written to allow the kind of interaction between animations and data that we are accustomed to using when we author in Flash. Canvas uses APIs for 2D drawing, text, shadows, gradients, and I don’t know what else:
var context = tester.getContext("2d");
It’s hard for me to imagine when I read documents like this and this how anyone will ever produce great data interactives like this and this using canvas — but that might just be because it’s a fairly new specification at an early stage of development. Or maybe it’s because I’m not a hardcore programmer. Either way, I’m waiting to see how far canvas can go.
What I must say — for the present — is that it would be much harder to teach non-programmers (such as graphics reporters) to use canvas than it is to teach them to use Flash.