One WebGL multiple canvases

by Gregg Tavares

CSS

canvas { border: 1px solid black; margin: 0.5em; }

JavaScript

// make relatively large canvases to show possible readback
var width = 2048;
var height = 2048;
var numCanvases = 3;

var webGLOffScreenCanvas = makeCanvas();
var gl = webglOffScreenCanvas = webGLOffScreenCanvas.getContext("experimental-webgl");

var contexts = [];
for (var ii = 0; ii < numCanvases; ++ii) {
    var c = makeCanvas();
    c.style.width = "64px";
    c.style.height = "64px";
    document.body.appendChild(c);
    contexts.push(c.getContext("2d"));
}

function makeCanvas() {
    var c = document.createElement("canvas"); 
    c.width = width;
    c.height = height;
    return c;
}

function drawSomeWebGLScene(gl) {
    gl.clearColor(Math.random(), Math.random(), Math.random(), 1);
    gl.clear(gl.COLOR_BUFFER_BIT);
}
     
function render() {
    contexts.forEach(function(ctx) {
      drawSomeWebGLScene(gl);
      ctx.drawImage(webGLOffScreenCanvas, 0, 0);
    });
    requestAnimationFrame(render);
}
render();