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

brainjam picture brainjam · Apr 30, 2010 · Viewed 77.1k times · Source

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?

Answer

Paul Irish picture Paul Irish · Apr 30, 2010

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