<script src="https://unpkg.com/gl-matrix@3.3.0/gl-matrix-min.js"></script> 
<canvas id="myCanvas" width="500" height="300" style="border:1px solid #000000;"></canvas>

 // Vertex Shader
const vertexShaderSource = `
attribute vec4 a_position;
uniform mat4 u_matrix;
void main() {
  gl_Position = u_matrix * a_position;
}
`;

// Fragment Shader
const fragmentShaderSource = `
precision mediump float;
uniform vec4 u_color;
void main() {
  gl_FragColor = u_color;
}
`; 

class WebGLRenderer {
  constructor(canvasId) {
    this.canvas = document.getElementById(canvasId);
    this.gl = this.canvas.getContext("webgl");

    this.vertexShader = this.createShader(this.gl.VERTEX_SHADER, vertexShaderSource);
    this.fragmentShader = this.createShader(this.gl.FRAGMENT_SHADER, fragmentShaderSource);

    this.program = this.createProgram(this.vertexShader, this.fragmentShader);

    this.positionAttributeLocation = this.gl.getAttribLocation(this.program, "a_position");
    this.colorUniformLocation = this.gl.getUniformLocation(this.program, "u_color");
    this.matrixUniformLocation = this.gl.getUniformLocation(this.program, "u_matrix");

    this.positionBuffer = this.gl.createBuffer();
    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionBuffer);
    this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array([
      -0.2, -0.3,
      0, 0.5,
      0.7, 0,
    ]), this.gl.STATIC_DRAW);
  }

  createShader(type, source) {
    let shader = this.gl.createShader(type);
    this.gl.shaderSource(shader, source);
    this.gl.compileShader(shader);
    return shader;
  }

  createProgram(vertexShader, fragmentShader) {
    let program = this.gl.createProgram();
    this.gl.attachShader(program, vertexShader);
    this.gl.attachShader(program, fragmentShader);
    this.gl.linkProgram(program);
    return program;
  }

  render() {
    this.gl.useProgram(this.program);

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

    this.gl.uniform4f(this.colorUniformLocation, Math.random(), Math.random(), Math.random(), 1);

    let matrix = new Float32Array(16);
    glMatrix.mat4.ortho(matrix, -1, 1, -1, 1, 0, 1);
    this.gl.uniformMatrix4fv(this.matrixUniformLocation, false, matrix);

    this.gl.drawArrays(this.gl.TRIANGLES, 0, 3);
  }
}

const renderer = new WebGLRenderer("myCanvas");
renderer.render();