JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/regl/1.3.7/regl.min.js"></script>
<div id="bg">
  <canvas id="c1"></canvas>
  <canvas id="c2"></canvas>
  <em>Left is pure WebGL. Right is Regl.</em>
</div>

CSS

#bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: #808080;
  background: black;
}
#c1, #c2 {
  width: 240px;
  height: 240px;
  border: 1px solid white;
}
em {
  display: block;
}

JavaScript

const canvas1 = document.querySelector('#c1');
const canvas2 = document.querySelector('#c2');

//////////////////////////////////////////////
// PURE WEBGL
//////////////////////////////////////////////

const gl = canvas1.getContext('webgl');
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
const vertexShaderSource = `
  attribute vec2 position;
  attribute vec4 color;
  varying vec4 v_color;

  void main() {
    gl_PointSize = 50.0;
    gl_Position = vec4(position, 0, 1);
    v_color = color;
  }
`;

const fragmentShaderSource = `
  precision mediump float;
  varying vec4 v_color;
  void main() {
    gl_FragColor = v_color;
  }
`;

const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
const program = createProgram(gl, vertexShader, fragmentShader);
gl.useProgram(program);

const positionAttributeLocation = gl.getAttribLocation(program, 'position');
const colorAttributeLocation = gl.getAttribLocation(program, 'color');
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

const colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.enableVertexAttribArray(colorAttributeLocation);
gl.vertexAttribPointer(colorAttributeLocation, 4, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
  -0.05, -0.05, -0.05, 0.05, 0.05, 0.05, 0.05, -0.05,
]), gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
const red = [1, 0, 0, 0.5];
const blue = [0, 0, 1, 0.5];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
  ...red, ...red,
  ...blue, ...blue,
]), gl.STATIC_DRAW);

gl.drawArrays(gl.POINTS, 0, 4);

function createShader(gl, type, shaderSource) {
  const shader =...