JSFiddle - React, Tailwind, and code Playground

by Subhasish2015

HTML

<canvas id="canvas"></canvas>
	<button id="clear">Clear</button>
<script type="vertexShader" id="vertexShader">
		#version 300 es
		in vec2 position;
		in vec4 color;
		out vec4 fcolor;
		uniform float vSize;
		void main () {
			gl_Position = vec4(position, 0.0, 1.0);
			gl_PointSize = 1.0;
			fcolor = color;
		}
	</script>

	<script type="fragmentShader" id="fragmentShader">
		#version 300 es
		precision mediump float;
		in vec4 fcolor;
		out vec4 finalColor;
		void main () {
			finalColor = vec4(0.0, 1.0, 0.0, 1.0);
		}
	</script>

JavaScript

const FLOAT_SIZE = 4;

var handleWebGLError = function (type, obj) {
	if (type === 'shader') {
		if (!gl.getShaderParameter(obj, gl.COMPILE_STATUS)) {
			console.error(gl.getShaderInfoLog(obj));
			return null;
		}
	} else if (type === 'program') {
		if (!gl.getProgramParameter(obj, gl.LINK_STATUS)) {
			console.error(gl.getProgramInfoLog(obj));
			return null;
		}
	}
	
};

var getAndCompileShaders = function (id, type) {
	var shader = gl.createShader(type);
	var shaderText = document.getElementById(id).text.trim();
	gl.shaderSource(shader, shaderText);
	gl.compileShader(shader);
	handleWebGLError('shader', shader);
	return shader;
};

var getProgram = function (vsId, fsId, use) {
	var vs = getAndCompileShaders(vsId, gl.VERTEX_SHADER);
	var fs = getAndCompileShaders(fsId, gl.FRAGMENT_SHADER);
	var program = gl.createProgram();
	gl.attachShader(program, vs);
	gl.attachShader(program, fs);
	gl.linkProgram(program);
	handleWebGLError('program', program);
	if (use) {
		gl.useProgram(program);
	}
	return program;
};

var createBuffer = function (gl, coords, isStatic) {
	var b = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, b);
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(coords), isStatic ? gl.STATIC_DRAW : gl.DYNAMIC_DRAW);
	return b;
};

var createBuffers = function (gl, coordsArr, isStatic) {
	var bufferArr = [];
	coordsArr.forEach (function (coords) {
		var b = gl.createBuffer();
		gl.bindBuffer(gl.ARRAY_BUFFER, b);
		gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(coords), isStatic ? gl.STATIC_DRAW : gl.DYNAMIC_DRAW);
		bufferArr.push(b);
	});
	return bufferArr;
};

var initWebGLCanvas = function (canvasId) {
	canvas = document.getElementById(canvasId);
	canvas.width = window.innerWidth * 0.90;
	canvas.height = window.innerHeight * 0.90;
	//get Context
	var gl = canvas.getContext('webgl2');
	//assign a default color 
	gl.clearColor(0.002, 0.12, 0.3, 1.0);
	gl.clear(gl.COLOR_BUFFER_BIT);
	return gl;
};

var clearCanvas = function (gl)...