I’ve been trying out the HTML5 Canvas element and its 2d rendering context to get a general feel for the functionality it adds and what purposes (if any) it could serve for Web-application development.
The difference, of course, is that the canvas element is rendered by the Web browser, and unfortunately HTML5 is still not uniformly supported between the various browsers and browser versions.
Overview of Internet Explorer’s support for the HTML5 Canvas Element
Browser support for the HTML5 canvas element is especially interesting when working with Internet Explorer (IE).
IE9 is supposed to the be the first version of Internet Explorer to support the HTML5 canvas element. Annoyingly, a common IE9 issue breaks even this support if the developer isn’t careful. I’m speaking of course about IE8 & 9’s notorious “Compatibility Mode“. I’ve written about this “feature” before, but just to summarize, compatibility mode was added to IE8+ to save IE6 developers from having to update their code for new browsers, but almost inevitably it ends up causing grief for anyone writing Web pages.
So I agree that IE9 supports the HTML5 canvas element with one caveat: you must remember to set the compatibility mode to IE9 or you will just see a blank screen. You can set the compatibility mode using the following meta tag that you can add to within head section of your Web page:
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
It Seems that all Major Browsers Including IE are Now Set to Support the HTML5 Canvas Element
Just to be safe I’ve checked what Web browsers & versions support the HTML5 canvas element. According to a Wikipedia article on the subject, the canvas element is supported by:
- Chrome 4+
- IE9 (Although IE9 does not support canvas in my tests)
- Firefox 2+
- Opera 9+ for desktops and Opera 10+ for mobile devices
- Safari 3.1+ for desktops and Safari 3.2+ for mobile devices
- Android Browser 2.1+
Although IE’s late support for the HTML5 canvas element is unfortunate, it’s thankfully not a deal-breaker both because of future development initiatives and because of a Google initiative to make the HTML5 canvas element available for IE6+.
Specifically, Google has created a small plugin called ExploreCanvas that will make any version of IE6 and higher properly render the HTML5 canvas element. I think this is great, and am happy that the fix exists.
How does the Google Fix for IE Work?
Not too difficult, that’s all there is to it. Now your canvas element should now render correctly in older versions of IE6+.
So what about the code?
A test of a few different colored squares using JQuery:
In the example code below you can see that the JQuery code references the myCanvas element, after which differently colored rectangles are added.
- The call to set the canvas to the 2D context is made using: canvas.get(0).getContext(“2D”);
- The call to set the color for the filled rectangle is: fillStyle = “rgb(rr,gg,bb)”
- The call to create a rectangle is: fillRect(locX,locY,rectWidth,rectHeight)
- The call to create an outline of a rectagle is: strokeRect(locX,locY,rectWidth,rectHeight). Note that this call does not appear to take the color styling set in the fillStyle command.
- Also, interesting to note is that to make sure the canvas renders in IE, the compatibility is set to IE9 and the Google ExplorerCanvas library is imported in the page header.
Here is code I found on the MSDN HTML5 canvas support page for IE9. The HTML header imports are the same as in the JQuery code above to ensure that it runs in most versions of IE6 and greater. As before the context is set to 2D (in this case, though, the command is canvas.getContext(“2D);) and the fillStyle and fillRect rendering commands work the same way as they did in the JQuery example code above.