What is the difference between getContext('webgl') vs getContext('3d')?

Question

Mozilla Developer Netowrk (MDN) Docs says this:

getContext(in DOMString contextId) RenderingContext Returns a drawing context on the canvas, or null if the context ID is not supported. A drawing context lets you draw on the canvas. Calling getContext with "2d" returns a CanvasRenderingContext2D object, whereas calling it with "experimental-webgl" (or "webgl") returns a WebGLRenderingContext object. This context is only available on browsers that implement WebGL.

Results: | Context | Chrome (webkit) | Firefox (gekko) | | ------------------ | ------------------------ | ------------------------ | | 2d | CanvasRenderingContext2D | CanvasRenderingContext2D | | 3d | null | null | | webgl | WebGLRenderingContext | WebGLRenderingContext | | experimental-webgl | WebGLRenderingContext | null |

I recommend reading up on the webgl wiki: http://www.khronos.org/webgl/wiki/FAQ

Here is the full What is the recommended way to initialize WebGL? section: (Though I suggest you read it right from the wiki in case it changes!)

What is the recommended way to initialize WebGL?

It is recommended that you check for success or failure to initialize. If WebGL fails to initialize it is recommended you distinguish between failure because the browser doesn't support WebGL and failure for some other reason. If the browser does not support WebGL then present the user with a link to "http://get.webgl.org". If WebGL failed for some other reason present the user with a link to "http://get.webgl.org/troubleshooting/"

You can determine if the browser supports WebGL by checking for the existence of WebGLRenderingContext.

if (window.WebGLRenderingContext) {
  // browser supports WebGL
}

If the browser supports WebGL and canvas.getContext("webgl") returns null then WebGL failed for some reason other than user's browser (no GPU, out of memory, etc...)

  if (!window.WebGLRenderingContext) {
    // the browser doesn't even know what WebGL is
    window.location = "http://get.webgl.org";
  } else {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("webgl");
    if (!ctx) {
      // browser supports WebGL but initialization failed.
      window.location = "http://get.webgl.org/troubleshooting";
    }
  }

Note: You MUST check that the browser supports WebGL to know that getting null from canvas.getContext() means There is a wrapper that will do all of this for you here.

Example using the wrapper

<html>
<body>
<script type="text/javascript" src="localpath/webgl-utils.js"></script>
<script>
  function init() {
    canvas = document.getElementById("c");
    gl = WebGLUtils.setupWebGL(canvas);
    if (!gl) {
      return;
    }
    ...
  }

  window.onload = init;
</script>
<canvas id="c"></canvas>
</body>
</html>