Canvas is Coming to IE9

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

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • DED

    Canvas has a lot of potential. I’ve used it in experimental designs where users could draw on the canvas to do a visual search. The direction and shape they drew triggered a Boolean search of a video database. It worked very well thanks to the clever backend people working on the project.

  • http://www.lunadesign.org awasson

    Craig… It seems HTML5 is extremely well supported by the browser vendors and I’m pretty excited about a lot of the features myself but what about non-HTML5 browsers or browsers that support some features but not all. Are we going to enter another era of “This site is best viewed using xxx”?

    Looking at this purely from a position of building websites that support common browsers, I’m a little concerned about backwards compatibility. IE6 is still lurking and it’s been unsupported for years now.

    • http://www.optimalworks.net/ Craig Buckler

      I hope we don’t ever return to the days of “best viewed in browser x”! In most cases, technologies such as SVG, canvas and CSS3 are fine if you use them for progressive enhancement, e.g. showing a pie chart of a table which is viewable by IE users. I have a few articles coming soon which discuss these issues in more depth.

      Heading toward the future, my biggest concern is IE8. IE9 is Windows Vista/7 only at a time when the majority of users are still using XP. IE8 will be the ‘best’ version available. I hope MS release an XP version of IE9 but it seems unlikely.

  • conticreative

    Here is something that occurred to me the other day while reading press releases and articles about the forthcoming IE9: Why is it that Microsoft has to include all new feature in full version numbers and big releases?
    Couldn’t they for instance introduce more compatibility in their existing version?

    IO am not talking about major things like full html5 compatibility. But for instance IE8 is the only major browser that does not understand the CSS3 shadow and corner radius.
    Would it kill them to add that feature in a service release so we can use it now instead of having to wait for IE9?
    By the time IE9 comes out I am sure there will be other small incompatibilities that will need to get addressed and I am sure we’ll have to wait for IE10 to have a web where what I write today will display reasonably similar on every major browser.

    • http://www.brothercake.com/ brothercake

      As long as the current release cycle timings are maintained, we will *always* be in a position of waiting for the next version of IE to support the things we’re doing now. Because by then we’ll be doing different things, and waiting for the *next* version, etc.

      I agree that incremental releases are the way to avoid this constant lag. It seems work for every other vendor.