Proper way to detect WebGL support?

The excellent Three library has, in fact, a mechanism for detecting the following:

1. WebGL support
2. File API support
3. Workers support

For WebGL, particularly, here is the code that is used:

function webgl_support () {    try {    var canvas = document.createElement('canvas');     return !!window.WebGLRenderingContext &&      (canvas.getContext('webgl') || canvas.getContext('experimental-webgl'));   } catch(e) {     return false;   } };

That code snippet is part of a Detector class which may also display the corresponding error messages to the user.

[Oct 2014] I've updated modernizrs example to match their current implementation, which is a cleaned up version from http://get.webgl.org/ further below.

Modernizr does,

var canvas;var ctx;var exts;try {  canvas = createElement('canvas');  ctx = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');  exts = ctx.getSupportedExtensions();}catch (e) {  return;}if (ctx !== undefined) {  Modernizr.webglextensions = new Boolean(true);}for (var i = -1, len = exts.length; ++i < len; ){  Modernizr.webglextensions[exts[i]] = true;}canvas = undefined;

Chromium points to http://get.webgl.org/ for the canonical support implementation,

try { gl = canvas.getContext("webgl"); }catch (x) { gl = null; }if (gl == null) {    try { gl = canvas.getContext("experimental-webgl"); experimental = true; }    catch (x) { gl = null; }}

As seen in http://www.browserleaks.com/webgl#howto-detect-webgl

This is a proper javascript function to detect WebGL support, with all kind of experimental WebGL context names and with checking of special cases, such as blocking WebGL functions by NoScript or TorBrowser.

It will report one of the three WebGL capability states:

• WebGL is enabled — return TRUE, or return
• WebGL object, if the first argument was passed
• WebGL is disabled — return FALSE, you can change it if you need>
• WebGL is not implimented — return FALSE

function webgl_detect(return_context){    if (!!window.WebGLRenderingContext) {        var canvas = document.createElement("canvas"),             names = ["webgl2", "webgl", "experimental-webgl", "moz-webgl", "webkit-3d"],           context = false;        for(var i=0;i< names.length;i++) {            try {                context = canvas.getContext(names[i]);                if (context && typeof context.getParameter == "function") {                    // WebGL is enabled                    if (return_context) {                        // return WebGL object if the function's argument is present                        return {name:names[i], gl:context};                    }                    // else, return just true                    return true;                }            } catch(e) {}        }        // WebGL is supported, but disabled        return false;    }    // WebGL not supported    return false;}