JSFiddle - React, Tailwind, and code Playground

by farazshaikh

HTML

<canvas width='400px' height='400px'></canvas>

CSS

body {
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

JavaScript

const canvas = document.querySelector("canvas")
const gl = canvas.getContext("webgl");

 // Set clear color to black, fully opaque
gl.clearColor(0.0, 0.0, 0.0, 1.0);
  // Clear the color buffer with specified clear color
gl.clear(gl.COLOR_BUFFER_BIT);

const vsSource = `
    attribute vec4 aVertexPosition;

    uniform mat4 uModelViewMatrix;
    uniform mat4 uProjectionMatrix;

    void main() {
      gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
    }
 `;