<!DOCTYPE html>
<link rel="help" href="https://html.spec.whatwg.org/#dom-offscreencanvas">
<canvas id="c1" width="100" height="100"></canvas>
<canvas id="c2" width="100" height="100"></canvas>
<canvas id="c3" width="100" height="100"></canvas>
<canvas id="c4" width="100" height="100"></canvas>
<script>
    const offscreenCanvas = new OffscreenCanvas(100, 100);
    const gl = offscreenCanvas.getContext("webgl");

    gl.clearColor(1, 0, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);

    const c1 = document.getElementById("c1");
    const bitmapContext1 = c1.getContext("bitmaprenderer");
    bitmapContext1.transferFromImageBitmap(offscreenCanvas.transferToImageBitmap());

    gl.clearColor(0, 1, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);

    const c2 = document.getElementById("c2");
    const bitmapContext2 = c2.getContext("bitmaprenderer");
    bitmapContext2.transferFromImageBitmap(offscreenCanvas.transferToImageBitmap());

    gl.clearColor(0, 0, 1, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);

    const c3 = document.getElementById("c3");
    const bitmapContext3 = c3.getContext("bitmaprenderer");
    bitmapContext3.transferFromImageBitmap(offscreenCanvas.transferToImageBitmap());

    const c4 = document.getElementById("c4");
    const bitmapContext4 = c4.getContext("bitmaprenderer");
    bitmapContext4.transferFromImageBitmap(offscreenCanvas.transferToImageBitmap());
</script>