Justin Cooney

Tech and programming information about topics of interest or issues that I find noteworthy. Many of these posts are notes for myself although I am happy if they are useful to others.

Looking into the HTML5 Canvas Element and Cross Browser Support

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.

So far I like how straightforward working with the HTML5 canvas element actually is. One can use either JQuery or JavaScript to do the coding, which I find very intuitive. The syntax and style of describing the graphics reminds me a lot of the days of plotting shapes and points on my Apple IIe using Applesoft BASIC, and then later on a PC using Microsoft’s QBasic.

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"/>

Interestingly enough, though, I believe IE support for the HTML5 canvas element will soon expand dramatically since most online tech reports these days say that Microsoft is scaling back its Silverlight technology in favor of an HTML5 future. To back this up, I have found interesting references on the MSDN support site documenting HTML5 features such as 3D support for the HTML5 canvas. This information is quite in-depth and even illustrates step-by-step how to put together a simple space game with just the HTML5 canvas and JavaScript.

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?

To make use of the ExploreCanvas fix for IE is quite straightforward. Simply browse to the download page for the zipped files and move the extracted JavaScript library called excanvas.js to the working folder where you have your Web pages that will use the canvas element. The final step is to simply include a script source reference to the JavaScript library file using the following tag in your HTML header:

<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->

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?

Below is the code I’ve been using to test the HTML5 canvas element in various browsers. The first example is written using JQuery, and the second is an example using pure JavaScript that I found on the MSDN HTML5 canvas support page for IE9.

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.
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function() {
 var canvas = $("#myCanvas");
 var context = canvas.get(0).getContext("2d");
 context.fillStyle = "rgb(150,29,28)";
 context.fillRect(10, 80, 200, 100);
 context.strokeRect(300, 80, 10, 50);
 context.fillStyle = "rgb(61,50,255)";
 context.fillRect(10, 10, 20, 30);
 });
 </script>
 </head>
 <body>
 <canvas id="myCanvas" width="500" height="500">
 Your browser does not support HTML5.
 </canvas>
 </body>
</html>

A Test of a blue square using pure JavaScript:

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.

I think at this point I do like the pure JavaScript syntax best as this comes most intuitively to me. However I intend to continue to investigate code for the canvas element in both syntaxes.

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="X-UA-Compatible" content="IE=9"/>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
 <style type="text/css" media="screen">
 </style>
 <script type="text/javascript">
 function init() {
 var canvas = document.getElementById("myCanvas");
 var ctx = canvas.getContext("2d");
 ctx.fillStyle = "rgb(0,0,255)";
 ctx.fillRect(10, 10, 100, 100);
 }
 </script>
 </head>
 <body onload="init();">
 <canvas id="myCanvas" width="100px" height="100px"></canvas>
 </body>
</html>

Justin Cooney

, , , , , , ,

Leave a comment