What About IE?

Microsoft Internet Explorer (up to and including Version 8, the current version at the time of writing) does not support the canvas API. However, Internet Explorer does support a Microsoft proprietary technology called VML, which can do many of the same things as the <canvas> element. And thus, excanvas.js was born.

ExplorerCanvas—excanvas.js—is an open source, Apache-licensed JavaScript library that implements the canvas API in Internet Explorer. To use it, include the following <script> element at the top of your page:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Dive Into HTML 5</title>
  <!--[if IE]>
    <script src="excanvas.js"></script>
  <![endif]-->
</head>
<body>
  ...
</body>
</html>

The <!--[if IE]> and <![endif]--> bits are conditional comments. Internet Explorer interprets them like an if statement: “if the current browser is any version of Internet Explorer, then execute this block.” Every other browser will treat the entire block as an HTML comment. The net result is that Internet Explorer will download the excanvas.js script and execute it, but other browsers will ignore the script altogether (not download it, not execute it, not anything). This makes your page load faster in browsers that implement the canvas API natively.

Once you’ve included the excanvas.js script in the <head> of your page, you don’t need to do anything else to accommodate Internet Explorer. You can just add <canvas> elements to your markup, or create them dynamically with JavaScript. Follow the instructions in this chapter to get the drawing context of a <canvas> element, and you can draw shapes, text, and patterns.

Well...not quite. There are a few limitations:

  • Gradients (see Gradients) can only be linear. Radial gradients are not supported.

  • Patterns must be repeating in both directions.

  • Clipping regions are not supported.

  • Nonuniform scaling does not correctly scale strokes.

  • It’s slow. This should not come as a raging shock to anyone, since Internet Explorer’s JavaScript parser is slower than other browsers’ to begin with. When you start drawing complex shapes via a JavaScript library that translates commands to a completely different technology, things are going to get bogged down. You won’t notice the performance degradation in simple examples like drawing a few lines and transforming an image, but you’ll see it right away once you start doing canvas-based animation and other crazy stuff.

There is one more caveat about using excanvas.js, and it’s a problem that I ran into while creating the examples in this chapter. ExplorerCanvas initializes its own faux-canvas interface automatically whenever you include the excanvas.js script in your HTML page. But that doesn’t mean that Internet Explorer is ready to use it immediately. In certain situations, you can run into a race condition where the faux-canvas interface is almost, but not quite, ready to use. The primary symptom of this state is that Internet Explorer will complain that “object doesn’t support this property or method” whenever you try to do anything with a <canvas> element, such as get its drawing context.

The easiest solution to this is to defer all of your canvas-related manipulation until after the onload event fires. This may take a while—if your page has a lot of images or videos, they will delay the onload event—but it will give ExplorerCanvas time to work its magic.

Get HTML5: Up and Running now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial