JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id='canvas' width='100' height='100'></canvas>
<img id='output'>

JavaScript

var canvas = document.getElementById('canvas');
  var gl = canvas.getContext('webgl', {
      premultipliedAlpha: false
    });

  var vertexShader = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vertexShader, 'attribute vec3 vertexPosition;void main() { gl_Position = vec4(vertexPosition, 1.0);}');
  gl.compileShader(vertexShader);
  var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(fragmentShader, 'void main() { gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);}');
  gl.compileShader(fragmentShader);

  var program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);
  gl.useProgram(program);

  var triangleBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, triangleBuffer);
  var vertices = [-0.5,  -0.5,  0.0, 0.5,  -0.5,  0.0, 0.0,   0.5,  0.0 ];
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

  var vertexPositionLocation = gl.getAttribLocation(program, 'vertexPosition');
  gl.vertexAttribPointer(vertexPositionLocation, 3, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(vertexPositionLocation);
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);

  document.getElementById('output').src = canvas.toDataURL();