JSFiddle - React, Tailwind, and code Playground

by mgoetzke

HTML

<canvas id='renderTarget' width="1024" height="1024">
</canvas>

JavaScript

var glcanvas = document.getElementById('renderTarget');
var ctx3d = prepare(glcanvas);

var img, tex, vloc, tloc, vertexBuff, texBuff;
prepare(glcanvas);

var canvas1024 = document.createElement('canvas');
canvas1024.width = 1024;
canvas1024.height = 1024;

//var ctx = canvas1024.getContext('2d');

var img1024 = new Image();
var tex1024 = ctx3d.createTexture();

var colors = ["blue","red","green" ];
var index = 0;



console.log(ctx3d.getParameter(ctx3d.MAX_TEXTURE_SIZE) )
function renderLoop(){
    window.requestAnimationFrame(renderLoop);    
    updateImage();
}



renderLoop();

function updateImage(){
    var ctx = canvas1024.getContext('2d');
    ctx.rect(0,0,1024,1024);
    var color = colors[(index++)%colors.length];
    //console.log(color)
    ctx.fillStyle = color;
    ctx.fill();

    img1024.onload = function() {
        ctx3d.bindTexture(ctx3d.TEXTURE_2D, tex1024);
        ctx3d.texParameteri(ctx3d.TEXTURE_2D, ctx3d.TEXTURE_MIN_FILTER, ctx3d.NEAREST);
        ctx3d.texParameteri(ctx3d.TEXTURE_2D, ctx3d.TEXTURE_MAG_FILTER, ctx3d.NEAREST);
        //ctx3d.texSubImage2D(ctx3d.TEXTURE_2D, 0, 0, 0, ctx3d.RGBA, ctx3d.UNSIGNED_BYTE, img1024);
        ctx3d.texImage2D(ctx3d.TEXTURE_2D, 0,  ctx3d.RGBA,  ctx3d.RGBA, ctx3d.UNSIGNED_BYTE, img1024);

    
        ctx3d.enableVertexAttribArray(vloc);
        ctx3d.bindBuffer(ctx3d.ARRAY_BUFFER, vertexBuff);
        ctx3d.vertexAttribPointer(vloc, 2, ctx3d.FLOAT, false, 0, 0);

        ctx3d.enableVertexAttribArray(tloc);
        ctx3d.bindBuffer(ctx3d.ARRAY_BUFFER, texBuff);
        ctx3d.bindTexture(ctx3d.TEXTURE_2D, tex);
        ctx3d.vertexAttribPointer(tloc, 2, ctx3d.FLOAT, false, 0, 0);

        ctx3d.drawArrays(ctx3d.TRIANGLE_FAN, 0, 4);
    };
    img1024.src = canvas1024.toDataURL();
}


    

function prepare(canvas){
   var ctx3d = canvas.getContext('experimental-webgl');
    var uLoc;

    // create shaders
    var vertexShaderSrc = 
    "attribute vec2 aVertex;" +
    "attribute vec2 aUV;" + 
   ...