JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="webgl" style="border: none;" width="500" height="500"></canvas>
<canvas id="texture" width="8192" height="8192" style="display:none"></canvas>

JavaScript

try {
    var canvas = document.getElementById("webgl");
    var gl = canvas.getContext("experimental-webgl");
    var t = gl.createTexture();
    t.image = new Image();
    //handleLoadedTexture(neheTexture);
    t.image.onload = function () {
        gl.bindTexture(gl.TEXTURE_2D, t);
        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, t.image);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
        gl.bindTexture(gl.TEXTURE_2D, null);
    }
    t.image.src = document.getElementById("texture").toDataURL();
} catch (e) {
    console.log(e);
    alert(e);
}