WebGL Simplest Example

index.js

//Create the canvas and get the WebGlRederingContext
let ctx = document.createElement('canvas')
let gl = ctx.getContext('webgl')
document.body.appendChild(ctx)
ctx.width = 600
ctx.height = 600
gl.viewport(0, 0, 600, 600)
gl.clearColor(0.0, 0.0, 0.0, 1.0)

//Vertex Shader steps
let vShaderSource =
`attribute vec2 aPosition;
void main(){
    gl_Position = vec4(aPosition, 1.0, 1.0);
}`
let vShaderObject = gl.createShader(gl.VERTEX_SHADER)
gl.shaderSource(vShaderObject, vShaderSource)
gl.compileShader(vShaderObject)
if (!gl.getShaderParameter(vShaderObject, gl.COMPILE_STATUS)) 
  console.error(gl.getShaderInfoLog(vShaderObject));

//Fragment Shader Steps
let fShaderSource =
`void main(){
    gl_FragColor = vec4(1.0,1.0,1.0,1.0);
}`
let fShaderObject = gl.createShader(gl.FRAGMENT_SHADER)
gl.shaderSource(fShaderObject, fShaderSource)
gl.compileShader(fShaderObject)
if (!gl.getShaderParameter(fShaderObject, gl.COMPILE_STATUS)) 
  console.error(gl.getShaderInfoLog(fShaderObject));

//Shader Program steps
let program = gl.createProgram()
gl.attachShader(program, vShaderObject)
gl.attachShader(program, fShaderObject)
gl.linkProgram(program)
if (!gl.getProgramParameter(program, gl.LINK_STATUS))
  console.error(gl.getProgramInfoLog(program));
gl.useProgram(program)

//Triangle steps
let positionBufferData = [0.0, 0.9, -0.9, -0.9, 0.9, -0.9]
let positionBuffer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer)
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positionBufferData), gl.STATIC_DRAW)
let aPosition = gl.getAttribLocation(program, 'aPosition')
gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, gl.FALSE, 0, 0)
gl.enableVertexAttribArray(aPosition)

//Draw
gl.clear(gl.COLOR_BUFFER_BIT)
gl.drawArrays(gl.TRIANGLES, 0, 3)