JSFiddle - React, Tailwind, and code Playground

by soulwire

HTML

<canvas id="canvas" width="500" height="500"></canvas>

CSS

html, body {
    background: #f2f2f2;
}

canvas {
    border: 1px solid #ccc;
    background: #fff;
}

JavaScript

var canvas = document.getElementById( 'canvas' );
var gl = canvas.getContext( 'experimental-webgl' );

var vsASrc = 'attribute vec2 pos; void main() { gl_Position = vec4(pos,1,1); }';
var fsASrc = 'precision mediump float; void main() { gl_FragColor = vec4(1,0,1,0.8); }';

var vsBSrc = 'attribute vec2 pos; void main() { gl_Position = vec4(pos,1,1); }';
var fsBSrc = 'precision mediump float; void main() { gl_FragColor = vec4(1,0,1,0.8); }';

// create shaders
var vsA = gl.createShader( gl.VERTEX_SHADER );
gl.shaderSource( vsA, vsASrc );
gl.compileShader( vsA );
if ( !gl.getShaderParameter( vsA, gl.COMPILE_STATUS ) ) throw gl.getShaderInfoLog( vsA );

var fsA = gl.createShader( gl.FRAGMENT_SHADER );
gl.shaderSource( fsA, fsASrc );
gl.compileShader( fsA );
if ( !gl.getShaderParameter( fsA, gl.COMPILE_STATUS ) ) throw gl.getShaderInfoLog( fsA );

var vsB = gl.createShader( gl.VERTEX_SHADER );
gl.shaderSource( vsB, vsBSrc );
gl.compileShader( vsB );
if ( !gl.getShaderParameter( vsB, gl.COMPILE_STATUS ) ) throw gl.getShaderInfoLog( vsB );

var fsB = gl.createShader( gl.FRAGMENT_SHADER );
gl.shaderSource( fsB, fsBSrc );
gl.compileShader( fsB );
if ( !gl.getShaderParameter( fsB, gl.COMPILE_STATUS ) ) throw gl.getShaderInfoLog( fsB );

// create programs
var progA = gl.createProgram();
gl.attachShader( progA, vsA );
gl.attachShader( progA, fsA );
gl.linkProgram( progA );
if ( !gl.getProgramParameter( progA, gl.LINK_STATUS ) ) throw gl.getProgramInfoLog( progA );
progA.pos = gl.getAttribLocation( progA, 'pos' );
console.log(progA.pos);

var progB = gl.createProgram();
gl.attachShader( progB, vsB );
gl.attachShader( progB, fsB );
gl.linkProgram( progB );
if ( !gl.getProgramParameter( progB, gl.LINK_STATUS ) ) throw gl.getProgramInfoLog( progB );
progB.pos = gl.getAttribLocation( progB, 'pos' );

// create buffers
var vertices = new Float32Array([-0.3,0.6,0.1,0.9,0,-0.4,0.2,0.8]);
var vBufferA = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, vBufferA );
gl.bufferData(...