JSFiddle - React, Tailwind, and code Playground

JavaScript

function main() {
  var canvas1 = document.createElement("canvas");
  canvas1.width = canvas1.height = 32;
  document.body.appendChild(canvas1);
  var c = canvas1.getContext("2d");
  c.strokeStyle = "1px solid black";
  c.strokeRect(0.5,0.5,31,31);
  c.fillStyle = "blue";
  c.fillRect(11,5,10,10);

  var canvas2 = document.createElement("canvas");
  canvas2.width = canvas1.width;
  canvas2.height = canvas1.height;
  document.body.appendChild(canvas2);
  var gl;
  var webglNames = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"];
  var gl;
  for (var i = 0; i < webglNames.length; i++)
    try {
      gl = canvas2.getContext(webglNames[i], {depth: false, antialias: false, preserveDrawingBuffer: true});
      if (gl)
        break;
    } catch (e) {}

  var tex1 = createAndSetupTexture(gl);
  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);  // automatically flip image
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas1);

  var imageFilter = new ImageFilter(gl);
  imageFilter.program = imageFilter.createProgram();
  var rectangleCoords = imageFilter.createRectangleCoords();
  imageFilter.attributes = imageFilter.createAttributes(rectangleCoords);
  imageFilter.outputWidth = canvas2.width;
  imageFilter.outputHeight = canvas2.height;
  imageFilter.texture = tex1;
  var textureAndFramebuffer = createTextureAndFramebuffer(gl, canvas2.width, canvas2.height);
  imageFilter.framebuffer = textureAndFramebuffer.framebuffer;

  var imageFilter2 = new ImageFilter(gl);
  imageFilter2.program = imageFilter.program;
  imageFilter2.attributes = imageFilter.attributes;
  imageFilter2.outputWidth = canvas2.width;
  imageFilter2.outputHeight = canvas2.height;
  imageFilter2.texture = textureAndFramebuffer.texture;
  imageFilter2.framebuffer = null;
  imageFilter.draw();

  gl.bindFramebuffer(gl.FRAMEBUFFER, imageFilter.framebuffer);
  var width = imageFilter.outputWidth, height = imageFilter.outputHeight;
  var array = new Uint8Array(width * height *...