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:

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.