HTML5 Canvas Test Browser support Canvas method

After getting a reference to the canvas element on an HTML page, we need to test whether the element contains a context. The context of canvas refers to the plane that is defined by the browser for painting. To put it simply, if the context does not exist, then canvas is in existence. There are several ways to test whether the browser supports canvas. The first method is to check whether the GetContext method of the canvas element exists in the HTML page:

The

code is as follows:


if (!thecanvas | |!thecanvas.getcontext) {


return;


}

In fact, the above code tests two points: first, tests whether Thecanvas is False (document.getElementById () returns FALSE if the ID does not exist), and secondly, tests whether the GetContext () function exists.

In the above code, if the test fails, the return statement executes and the program terminates.

Another approach is to create a function that is specifically designed to determine whether canvas is supported, whereas in this function a canvas element is generated in real time to make this judgment-a popular method, Mark Pilgrim on his HTML5 website http:// This scenario is mentioned in diveintohtml5.org:

The

code is as follows:


function Canvassupport () {


return!! Document.createelement (' canvas '). GetContext;


}


function Canvasapp () {


if (!canvassupport ()) {


return;


}


}

Our favorite approach is to use the Modernizr.js library (found in http://www.modernizr.com). Modernizr is an easy-to-use lightweight JavaScript library for testing the compatibility of various web technologies-it provides a number of static Boolean methods that can be used to test whether the current canvas is supported.

Introducing Modernizr in an HTML page is simple, downloading code from http://www.modernizr.com, and then including this external JS file in an HTML page:

The
code is as follows:


<script src= "Modernizr-1.6.min.js" ></script>

Using the Modernizr test canvas support, simply change the Canvassupport function above:

The

code is as follows:


function Canvassupport () {


return Modernizr.canvas;


}

We believe that it is the best solution to determine whether browsers support canvas and to use Modernizr.js.