javascripthtmlcanvasprogressive-enhancementgraceful-degradation

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?

Solution

  • 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()){ ...