"An Introduction to WebGL" tutorial code in vanilla JS

index.js

// From http://robots.thoughtbot.com/an-introduction-to-webgl
var app = function () {
  var canvas = document.getElementById('canvas'),
      gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
  
  // Create elements on the page which contain your shaders. 
  // I like using script tags with a different type attribute, like:
  // `<script id="vertex-shader" type="x-vertex/x-shader">`
  // You could also just put the shaders inline, but I hate escaping line breaks.
  var shaders = {
    vertexMain : document.getElementById('vertex-shader').innerHTML,
    fragmentMain : document.getElementById('fragment-shader').innerHTML
  }

  // This pattern from "The Good Parts", which you should read if you haven't.
  var WebGLCompiler = function (gl, shaders) {
    var that = {};

    that.shaders = shaders || {};
    that.gl = gl;

    that.createProgramWithShaders = function (vertexShaderName, fragmentShaderName) {
      var vertexShader = this.createShader(vertexShaderName),
          fragmentShader = this.createShader(fragmentShaderName);
      return this.createProgram(vertexShader, fragmentShader);
    }

    that.createShader = function (shaderName) {
      var shaderSource = this.shaders[shaderName];
      if (!shaderSource) {
        throw "Shader not found";
      }
      return this.compileShader(shaderSource, this.typeForShader(shaderName));
    }

    that.typeForShader = function (name) {
      if (name.indexOf('vertex') != -1) {
        return this.gl.VERTEX_SHADER;
      } else if (name.indexOf('fragment') != -1) {
        return this.gl.FRAGMENT_SHADER;
      } else {
        throw "Unknown shader type";
      }
    }

    that.compileShader = function (shaderSource, shaderType) {
      shader = this.gl.createShader(shaderType);
      this.gl.shaderSource(shader, shaderSource);
      this.gl.compileShader(shader);
      return shader;
    }

    that.createProgram = function (vertexShader, fragmentShader) {
      var program = this.gl.createProgram();
      this.gl.attachShader(program, vertexShader);
      this.gl.attachShader(program, fragmentShader);
      this.gl.linkProgram(program);

      if ( !this.gl.getProgramParameter(program, this.gl.LINK_STATUS) ) {
        error = this.gl.getProgramInfoLog(program);
        console.error(error);
        throw "Program failed to link. Error: #{error}";
      }

      return program;
    }

    return that;
  }

  compiler = WebGLCompiler(gl, shaders);

  program = compiler.createProgramWithShaders('vertexMain', 'fragmentMain');

  gl.clearColor(1.0, 1.0, 1.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);

  gl.useProgram(program);
  buffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  gl.bufferData(
    gl.ARRAY_BUFFER,
    new Float32Array([
      0.0, 0.8,
      -0.8, -0.8,
      0.8, -0.8,
    ]),
    gl.STATIC_DRAW
  );

  vertexCoord = gl.getAttribLocation(program, "vertexCoord");

  gl.enableVertexAttribArray(vertexCoord);
  gl.vertexAttribPointer(vertexCoord, 2, gl.FLOAT, false, 0, 0);

  gl.drawArrays(gl.TRIANGLES, 0, 3);
}
// Wait until the DOM is ready
window.requestAnimationFrame(app);