Proper way to detect WebGL support?
[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; }
}
The excellent Three library has, in fact, a mechanism for detecting the following:
- WebGL support
- File API support
- 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.