JSFiddle - React, Tailwind, and code Playground

HTML

<script type="x-shader/x-vertex" id="vertexshader">
attribute vec2 vertex;
uniform vec2 center;
uniform vec2 size;

void main(void) 
{
	vec2 p = center + (vertex/2.0) * size;
	gl_Position.xy = p/vec2(180,90);
	gl_Position.z = 0.0;
	gl_Position.w = 1.0; 
} 
</script>

<script type="x-shader/x-fragment" id="fragmentshader">
precision mediump float;
uniform vec3 color;

void main(void) 
{
	gl_FragColor.rgb = color;
	gl_FragColor.a = 0.5;
}
</script>
<canvas id="Render" style="border: none; width: 100%; height: 100%"></canvas>

JavaScript

var Projects = [
	{ 	center : [ -110, 60],
		size : [100, 18],
		color : [0, 0, 1]
	},
	{ 	center : [ 10, 25],
		size : [70, 70],
		color : [1, 0, 0]
	},
	{ 	center : [ 110, 50],
		size : [100, 25],
		color : [1, 1, 0]
	},
	{ 	center : [ 100, 0],
		size : [50, 50],
		color : [0, 1, 0]
	},
	{ 	center : [-160, -15],
		size : [20, 120],
		color : [0, 1, 1]
	} ,
	{ 	center : [-90, -5],
		size : [80, 40],
		color : [1, 0, 1]
	}, 
	{ 	center : [ 0, -60],
		size : [230, 25],
		color : [0.3, 0.8, 0.1]
	} 
];
	
var canvas = document.getElementById("Render");
var gl = canvas.getContext("webgl");

gl.disable( gl.CULL_FACE );
gl.clearColor(0.0, 0.0, 0.0, 1.0);

var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, document.getElementById('vertexshader').textContent);
gl.compileShader(vertexShader);

var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, document.getElementById('fragmentshader').textContent);
gl.compileShader(fragmentShader);

var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);

// activation des shaders
gl.useProgram(shaderProgram);

shaderProgram.vertexAttribute = gl.getAttribLocation(shaderProgram, "vertex");
gl.enableVertexAttribArray(shaderProgram.vertexAttribute);
shaderProgram.centerUniform = gl.getUniformLocation(shaderProgram, "center");
shaderProgram.sizeUniform = gl.getUniformLocation(shaderProgram, "size");
shaderProgram.colorUniform = gl.getUniformLocation(shaderProgram, "color");

var QuadVertexBuffer = new Float32Array(
    [ //  x     y
        -1.0, -1.0, //sommet bas gauche
        -1.0,  1.0, //sommet haut gauche
        1.0, -1.0, //sommet bas droit
        1.0,  1.0  //sommet haut droit 
    ]);

var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, QuadVertexBuffer,...