IE9 may be vaporware for a while yet, but that hasn’t stopped Microsoft announcing new features with a fanfare. The latest offering is canvas; an HTML5 image technology introduced by Apple. Developers had questioned why it was missing in the second preview release of IE9 … especially when Microsoft started boasting about “100% HTML5 compatibility”.
Safari was the first browser to implement the canvas tag and IE’s other competitors had added support by mid-2009. Microsoft remained quiet until now, but their commitment to canvas in IE9 should be applauded.
What is canvas?
Canvas is a scriptable image. You define its dimensions like a standard img tag, e.g.
<canvas id="mycanvas" width="200" height="200">
Sorry, but your browser does not support canvas.
</canvas>
then draw within that area using a JavaScript API. For example, to draw a blue square which is 180px in dimension at a point 10 pixels down and across:
var canvas = document.getElementById("mycanvas");
if (canvas.getContext) {
var ctx = mycanvas.getContext("2d");
ctx.fillStyle = "rgb(0,0,255)";
ctx.fillRect(10, 10, 180, 180);
}
The browser has no access to the resulting shapes once they’ve been drawn. If you wanted to bounce the square around the canvas, you need to repeatedly clear and redraw the shape. However, the current image can be saved using ctx.toDataURL() which returns a PNG-encoded representation.
Canvas-handling libraries such as CAKE and processing.js are becoming more common as browser support improves. I suspect we’ll see canvas being used for animation, charts and games — there are several excellent examples which illustrate the potential of the technology.
Until now, few developers have tried canvas because it’s not supported in IE. Silverlight-based shims are available, but how many users have the Silverlight plugin installed? That should change now Microsoft has confirmed the feature in IE9.
It’s an exciting development, but I suspect many of you are questioning why you should use canvas rather than SVG? Either technology can be used for graphic manipulation projects but there are subtle differences between the two.
Coming soon — Canvas vs SVG…
Craig BucklerCraig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.
