JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width: 500px; height: 500px;">
  <canvas id="output"></canvas>
</div>

JavaScript

const vertices = [
  -1.0, 1.0, 0.0,
  -1.0, -1.0, 0.0,
  1.0, -1.0, 0.0,
  1.0, 1.0, 0.0
];
const indices = [0, 1, 2, 3];
const height = 500;
const width = 500;

const canvas = document.createElement("canvas");
canvas.height = height;
canvas.width = width;
const gl = canvas.getContext("webgl");

// Create an empty buffer object to store vertex buffer
const vertex_buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, null);

// Create an empty buffer object to store Index buffer
const Index_Buffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, Index_Buffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);

// Vertex shader source code
const vertCode = `
    attribute vec3 coordinates;
 
    void main(void) {
      gl_Position = vec4(coordinates, 1.0);
    }
  `;
const vertShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertShader, vertCode);
gl.compileShader(vertShader);

// Fragment shader
const fragCode = `
    // fragment shaders don't have a default precision so we need
    // to pick one. mediump is a good default
    precision mediump float;
  
    uniform float u_width;
    uniform float u_height;
    uniform vec4 u_color1;
    uniform vec4 u_color2;
  
    void main(void) {
      vec2 st = gl_FragCoord.xy;
      float half_width = u_width / 2.0;
      float half_height = u_height / 2.0;

      float percent = (atan(st[0] - half_width, half_height - st[1]) - 3.14) / -6.28;
      gl_FragColor = mix(u_color1, u_color2, percent);
    }
  `;
const fragShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragShader, fragCode);
gl.compileShader(fragShader);

// Create a shader program object to store
// the combined shader program
const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram,...