JSFiddle - React, Tailwind, and code Playground

HTML

<script id="2d-vertex-shader" type="x-shader/x-vertex">

			attribute vec3 aVertexPosition;
			attribute vec4 aVertexColor;

			varying lowp vec4 vColor;

			void main(void) {
				gl_Position = vec4(aVertexPosition, 1.0);
				
				vColor = aVertexColor;
			}
		</script>

		<script id="2d-fragment-shader" type="x-shader/x-fragment">
			
			varying lowp vec4 vColor;

			void main(void) {
				gl_FragColor = vColor;
			}
		</script>
		
		<canvas id="mycanvas" width="500" height="500"></canvas>

JavaScript

var canvas;
var gl;
var triangleProgram;

var maxTriangles = 1000000; // that's a lot of triangles!
var numTriangles = 1000000;
var curTriIndex = 0;

var vertexPositionAttribute;
var vertexColorAttribute;

var verticesBuffer;

var step = Float32Array.BYTES_PER_ELEMENT;
var itemSize = 3 + 4; // x,y,z + r,g,b,a
var stride = step * itemSize;

var convertedVerts = new Float32Array(maxTriangles * 3 * itemSize); // triangles * 3 points of tri * (x,y,z + r,g,b,a) = 21 floats per triangle

window.onload = function() {
	
	canvas = document.getElementById('mycanvas');

	gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');

	// these are the settings for basic overlay transparency
	gl.disable(gl.DEPTH_TEST);
	gl.enable(gl.BLEND);
	gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

	var vertexShaderHandle = gl.createShader(gl.VERTEX_SHADER);
	var fragmentShaderHandle = gl.createShader(gl.FRAGMENT_SHADER);
	
	gl.shaderSource(vertexShaderHandle, document.getElementById('2d-vertex-shader').text);		
	gl.shaderSource(fragmentShaderHandle, document.getElementById('2d-fragment-shader').text);		
		
	gl.compileShader(vertexShaderHandle);
	gl.compileShader(fragmentShaderHandle);
	
	triangleProgram = gl.createProgram();
	gl.attachShader(triangleProgram, vertexShaderHandle);
	gl.attachShader(triangleProgram, fragmentShaderHandle);
	gl.linkProgram(triangleProgram);
	
	gl.useProgram(triangleProgram);
	
	verticesBuffer = gl.createBuffer();
	
	vertexPositionAttribute = gl.getAttribLocation(triangleProgram, "aVertexPosition");
	gl.enableVertexAttribArray(vertexPositionAttribute);
	
	vertexColorAttribute = gl.getAttribLocation(triangleProgram, "aVertexColor");
	gl.enableVertexAttribArray(vertexColorAttribute);
	
	gl.viewport(0, 0, canvas.width, canvas.height);
	gl.clearColor(0, 0.5, 0, 1);
	
	(function animloop(){
		requestAnimFrame(animloop);
		
		curTriIndex = 0;
		drawShapes();
		render();
	})();
	
};

function drawShapes() {
	for(var i = 0; i < 150000; i++)...