Best way to detect that HTML5 <canvas> is not supported

Question

The standard way to deal with situations where the browser does not support the HTML5 <canvas> tag is to embed some fallback content, usually a polite version (and sometimes a less polite version) of

<canvas>Your browser sucks</canvas>

But the rest of the page remains the same, which may be inappropriate or misleading. I'd like some way of detecting canvas non-support so that I can present the rest of my page accordingly. What would you recommend?

Answer 1

I usually run a check for getContext when I create my canvas object.

(function () {
    var canvas = document.createElement('canvas'), context;
    if (!canvas.getContext) {
        // not supported
        return;
    }

    canvas.width = 800;
    canvas.height = 600;
    context = canvas.getContext('2d');
    document.body.appendChild(canvas);
}());

If it is supported, then you can continue the canvas setup and add it to the DOM. This is a simple example of Progressive Enhancement, which I (personally) prefer over Graceful Degradation.

Answer 2

You can use Matt's suggestion. I've also found the following works:

var canvasSupported = "HTMLCanvasElement" in window;

Latest Firefox, Chrome & Opera return true, all IEs return false.

To clarify, this method makes use of the HTMLCanvasElement class that derives from the HTMLElement class exposed by the browser -- IE8 exposes these classes in standards mode only, IE9 will expose them in IE8 and IE9 standards modes.

This feels more like "feature detection" to me, you're asking if something exists, not trying to create it and then asking if creating it worked. The latter is also not as efficient. This is something to consider when including many similar methods in a large library that is for use along with other scripts on a page, you want to squeeze as much performance as possible.

---

A blog post from the IE9 team appeared today which reminded me of this answer. It's interesting to me that posting it caused a bit of controversy, considering that it was accepted and then later the acceptance was transferred to a different answer. Here we are 4 months later and an official blog post from the aforementioned vendor recommends this method:

In addition to HTML markup, support for , , and can also be detected from script. This detection can be performed many ways, but one of the simplest is to check for the existence of the appropriate interface object off of window.

// Example 7: Simple feature detection for 
if(window.HTMLCanvasElement) {
    // Code requiring canvas support
}

This is virtually identical to the method I suggested here. The only difference is the truthy/falsey check, instead of the property in object check. Granted, they do suggest the check for getContext as an alternative, but I thought it worth updating this answer for those who might want to use an alternative to creating a dummy element and not using it.

Answer 3

Why not try modernizr ? It's a JS library that provides detection capability.

Quote:

Have you ever wanted to do if-statements in your CSS for the availability of cool features like border-radius? Well, with Modernizr you can accomplish just that!

Answer 4

There may be a gotcha here- some clients do not support all canvas methods I like to know right off if the canvas text api is functional

document.canvas= (function(){
    var dc= document.createElement('canvas');
    if(!dc.getContext) return 0;
    var c= dc.getContext('2d');
    return typeof c.fillText== 'function'? 2: 1;
})();

alert(document.canvas)

Answer 5

This is the technique used in Modernizr and basically every other library that does canvas work:

function isCanvasSupported(){
  return !!document.createElement('canvas').getContext;
}

Since your question was for detection when it's not supported, I recommend using it like so:

if (!isCanvasSupported()){ ...