Exhibit #0: Your First WebGL Program

What We Did

• Create a canvas element. Give it an ID for future reference.

  <canvas id="webglCanvas" style="border: none; background-color: black;" width="512" height="512"></canvas>

• In Javascript, retrieve the canvas element.

  var canvas = document.getElementById("webglCanvas")
  

• Then, call getContext("experimental-webgl") or getContext("webgl") method of the canvas element, which ever one works.

  var gl = canvas.getContext("experimental-webgl");
  if (!gl) {
      gl = canvas.getContent("webgl");
      if (!gl) {
          alert("Cannot get WebGL context!");
      }
  }
  

• What we get is a WebGL context, a Javascript object that allows us to access functions and constants in the WebGL API.