Canvas Element and IE

Question

_{Well not just IE, any browser that doesn't currently support it}

I want to start using the processing.js framework. It's used for making images with the canvas element. However I'm reluctant to use it due to the fact that it's not widely supported.

So what's the best way for me to give the user an alternative image if they do not support the canvas element?

I'd need something like...

if(!canvas){
    element.style.backgroundColor = 'red';
}

Is there a standardised way of doing this yet? If not what's the best thing I could do?

Answer 1

Yes, actually the useful property of HTML is that it ignores unknown tags. So the following:

<canvas> This text is shown to IE users </canvas>

Will show the fallback text in IE.

Answer 2

Any content between the <canvas></canvas> tags will be displayed if the canvas element is not supported. So you can try:

<canvas><img src="alt-image-for-old-browsers.png" /></canvas>

The logical thing that comes to mind is to place the JavaScript you want to run between the <canvas></canvas> tags:

<canvas>
  <script>
  document.getElementById('element').style.backgroundColor = 'red';
  </script>
</canvas>

But alas this doesn't work. Even browsers that support the Canvas API will execute the script.

So perhaps the best thing you can do to programatically check that the browser supports the canvas API is to check the getContext method available on all <canvas></canvas> elements:

function supportsCanvasAPI() {
  var canvas = document.createElement('canvas');
  if (window.G_vmlCanvasManager) { // IE ExplorerCanvas lib included?
    G_vmlCanvasManager.initElement(canvas);
  }
  return 'getContext' in canvas
}

That creates a dummy canvas (so as to not worry about grabbing a reference to one in the DOM already) and checks if the getContext property exists on the element. It also checks to see if ExplorerCanvas has been included for IE. It won't tell you exactly what features of the API are supported (beyond the standard set of shapes, paths, etc).

An article on feature-detecting HTML5 features (like canvas) can be found here.

Answer 3

if (typeof HTMLCanvasElement === 'undefined') {
 // redirect to another page, or whatever you want
}

Answer 4

You may also consider using one of the JavaScript libraries that essentially create a working canvas tag in IE. Here's one: http://code.google.com/p/explorercanvas/

Answer 5

Canvas works on Opera, Chrome, Safari, Firefox, IE6-8 (with excanvas.js, as @philfreo mentioned).

Processing.js, in particular, does work on IE, as is stated on the Processing.js homepage:

Processing.js runs in FireFox, Safari, Opera, Chrome and will also work with Internet Explorer, using Explorer Canvas.

There are a few tricks with IE: You need to pay special attention when you create a Canvas dynamically, you can't attach events to it (directly--you can attach to a container div), you can't get pixel info from the canvas, and radial gradients aren't supported. Oh, and it's a lot slower on IE, of course.

I don't think any of those caveats will apply to you when you're working in processing.js, except of course for the slowness of excanvas.js emulating the canvas.

Answer 6

You could look at the Modernizr library to check for support for the various features you're interested in.