Best way to detect that HTML5 is not supported

Posted on

Best way to detect that HTML5 is not supported – Even if we have a good project plan and a logical concept, we will spend the majority of our time correcting errors abaout javascript and html. Furthermore, our application can run without obvious errors with JavaScript, we must use various ways to ensure that everything is operating properly. In general, there are two types of errors that you’ll encounter while doing something wrong in code: Syntax Errors and Logic Errors. To make bug fixing easier, every JavaScript error is captured with a full stack trace and the specific line of source code marked. To assist you in resolving the JavaScript error, look at the discuss below to fix problem about Best way to detect that HTML5 is not supported.

Problem :

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

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 = "";
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

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

    canvas.width = 800;
    canvas.height = 600;
    context = canvas.getContext('2d');

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.

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


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!

try {
    alert("HTML5 Canvas is supported in your browser.");
} catch (e) {
    alert("HTML5 Canvas is not supported in your browser.");

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;


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


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);
  /*some code goes here, and you can use 'context', it is already defined*/
  /*oof, no canvas support :(*/

Leave a Reply

Your email address will not be published. Required fields are marked *