HTML5 Canvas Support check using JavaScript – the simple way

50 %
50 %
Information about HTML5 Canvas Support check using JavaScript – the simple way
Technology

Published on May 13, 2013

Author: jsphkhan

Source: slideshare.net

Description

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/

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.

Add a comment

Related presentations

Related pages

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 ...
Read more

javascript - Best way to detect that HTML5 is not ...

The standard way to deal with situations where the browser does not support the HTML5 tag is to embed some fallback content like: ...
Read more

HTML5 Canvas - W3Schools Online Web Tutorials

HTML5 Intro HTML5 Support HTML5 Elements HTML5 Semantics HTML5 Migration ... HTML5 Canvas « Previous. Next ... (usually JavaScript). The element ...
Read more

Beautiful HTML5 JavaScript Charts | CanvasJS

HTML5 JavaScript Charts that are built on top of HTML5 Canvas ... HTML5 JavaScript Charting Library with a simple ... Also check out charts created using ...
Read more

Using document.createElement() to test for browser support ...

Using document.createElement() ... with a check for support for the canvas element ... script type="text/javascript"> document.createElement ...
Read more

Fabric.js Javascript Canvas Library

Fabric.js is a powerful and simple Javascript HTML5 canvas ... Using Fabric.js, ... IE<9 support (using excanvas) Check out demos Read introduction ...
Read more

html5 - Why use instead of plain old Javascript? - Stack ...

Some of the HTML5 canvas demos ... or with "plain old JavaScript" See simple example here: