CODEWITHSUNDEEP
javascripthtmlcanvasprogressive-enhancementgraceful-degradation
brainjam
brainjam

Reputation: 19005

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

The standard way to deal with situations where the browser does not support the HTML5 <canvas> tag is to embed some fallback content like:

<canvas>Your browser doesn't support "canvas".</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?

Upvotes: 142

Views: 83185

Answers (8)

Andy E
Andy E

Reputation: 344567

There are two popular methods of detecting canvas support in browsers:

  1. Matt's suggestion of checking for the existence of getContext, also used in a similar fashion by the Modernizr library:

    var canvasSupported = !!document.createElement("canvas").getContext;

  2. Checking the existence of the HTMLCanvasElement interface, as defined by the WebIDL and HTML specifications. This approach was also recommended in a blog post from the IE 9 team.

    var canvasSupported = !!window.HTMLCanvasElement;

My recommendation is a variation of the latter (see Additional Notes), for several reasons:

  • Every known browser supporting canvas ― including IE 9 ― implements this interface;
  • It's more concise and instantly obvious what the code is doing;
  • The getContext approach is significantly slower across all browsers, because it involves creating an HTML element. This is not ideal when you need to squeeze as much performance as possible (in a library like Modernizr, for example).

There are no noticeable benefits to using the first method. Both approaches can be spoofed, but this not likely to happen by accident.

Additional Notes

It may still be necessary to check that a 2D context can be retrieved. Reportedly, some mobile browsers can return true for both above checks, but return null for .getContext('2d'). This is why Modernizr also checks the result of .getContext('2d').  However, WebIDL & HTML ― again ― gives us another better, faster option:

var canvas2DSupported = !!window.CanvasRenderingContext2D;

Notice that we can skip checking for the canvas element entirely and go straight to checking for 2D rendering support. The CanvasRenderingContext2D interface is also part of the HTML specification.

You must use the getContext approach for detecting WebGL support because, even though the browser may support the WebGLRenderingContext, getContext() may return null if the browser is unable to interface with the GPU due to driver issues and there is no software implementation. In this case, checking for the interface first allows you to skip checking for getContext:

var cvsEl, ctx;
if (!window.WebGLRenderingContext)
    window.location = "http://get.webgl.org";
else {
    cvsEl = document.createElement("canvas");
    ctx = cvsEl.getContext("webgl") || cvsEl.getContext("experimental-webgl");

    if (!ctx) {
        // Browser supports WebGL, but cannot create the context
    }
}

##Performance Comparison Performance of the getContext approach is 85-90% slower in Firefox 11 and Opera 11 and about 55% slower in Chromium 18.

    Simple comparison table, click to run a test in your browser

Upvotes: 104

Callum Hynes
Callum Hynes

Reputation: 11

If you're going to get the context of your canvas, you might as well use it as the test:

var canvas = document.getElementById('canvas');
var context = (canvas.getContext?canvas.getContext('2d'):undefined);
if(!!context){
  /*some code goes here, and you can use 'context', it is already defined*/
}else{
  /*oof, no canvas support :(*/
}

Upvotes: 0

Beka Tomashvili
Beka Tomashvili

Reputation: 2301

You can use canisuse.js script to detect if your browsers supports canvas or not 

caniuse.canvas()

Upvotes: 0

kennebec
kennebec

Reputation: 104770

There may be a gotcha here- some clients do not support all canvas methods.

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

alert(hascanvas)

Upvotes: 1

Sheikh Ali
Sheikh Ali

Reputation: 1544

try {
    document.createElement("canvas").getContext("2d");
    alert("HTML5 Canvas is supported in your browser.");
} catch (e) {
    alert("HTML5 Canvas is not supported in your browser.");
}

Upvotes: 5

Paul Irish
Paul Irish

Reputation: 49142

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

function isCanvasSupported(){
  var elem = document.createElement('canvas');
  return !!(elem.getContext && elem.getContext('2d'));
}

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

if (!isCanvasSupported()){ ...

Upvotes: 221

Frozenskys
Frozenskys

Reputation: 4410

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!

Upvotes: 6

Matt
Matt

Reputation: 44058

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.

Upvotes: 13

Related Questions