"An Introduction to WebGL" tutorial code in vanilla JS

index.js

var app = function () {
  var canvas = document.getElementById('canvas'),
      gl = canvas.getContext('webgl');

  var shaders = {
    vertexMain : document.getElementById('vertex-shader').innerHTML,
    fragmentMain : document.getElementById('fragment-shader').innerHTML
  }

  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);
}
window.requestAnimationFrame(app);