HTML5 Canvas Support check using JavaScript – the simple way

376 views

Published on

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/

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
376
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5 Canvas Support check using JavaScript – the simple way

  1. 1. HTML5 Canvas Support check usingJavaScript – the simple wayFor 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 anexternal library like Modernizer to do a simple check like this. In fact most of the feature checks can be donenatively, that’s what I prefer.Here is the code,var canvasEl = document.createElement(canvas); //create the canvas objectif(!canvasEl.getContext) //if the method is not supported, i.e canvas is notsupported{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 youmight know that to work with Canvas, you have to get it’s context object (2d for now), which can be retrieved by thegetContext() method. So, if a browser does not support the <canvas> tag or the canvas element, then no way thegetContext() method will be defined for it. That’s what I check in the second line – the if condition. Remember thata function/method name is a variable which holds a reference to the function block. So we can check whether it isdefined or not, in a normal way like we do for object properties. IE8 doesn’t support HTML5 Canvas. So try thiscode 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 (usingdocument.onreadystatechange, more). You can modify it as per your need.Leave behind a comment if you are upset with this attempt.

×