This is how you can check for HTML5 Canvas support in your browser by using JavaScript, there’s no need of an external library like Modernizer to do a simple check like this. In fact most of the feature checks can be done natively, that’s what I prefer. For the full post download this file or visit the actual blog post link: http://jbkflex.wordpress.com/2013/05/02/html5-canvas-support-check-using-javascript-the-simple-way/

1. HTML5 Canvas Support check using
JavaScript – the simple way
For the full blog post visit: http://jbkflex.wordpress.com/2013/05/02/html5-canvas-support-check-using-
javascript-the-simple-way/
This is how you can check for HTML5 Canvas support in your browser by using JavaScript, there’s no need of an
external library like Modernizer to do a simple check like this. In fact most of the feature checks can be done
natively, that’s what I prefer.
Here is the code,
var canvasEl = document.createElement('canvas'); //create the canvas object
if(!canvasEl.getContext) //if the method is not supported, i.e canvas is not
supported
{
document.write("HTML5 Canvas Not Supported By Your Browser");
return;
}
As you can see in the first line I create a HTML5 Canvas element by using createElement() DOM method. As you
might know that to work with Canvas, you have to get it’s context object (2d for now), which can be retrieved by the
getContext() method. So, if a browser does not support the <canvas> tag or the canvas element, then no way the
getContext() method will be defined for it. That’s what I check in the second line – the if condition. Remember that
a function/method name is a variable which holds a reference to the function block. So we can check whether it is
defined or not, in a normal way like we do for object properties. IE8 doesn’t support HTML5 Canvas. So try this
code in IE8 for a quick test.
How can I use it with my code?
Use this code block inside the window load event handler or when the DOM ready event is triggered (using
document.onreadystatechange, more). You can modify it as per your need.
Leave behind a comment if you are upset with this attempt.