OffscreenCanvas just one draw

by pedro_g_s

HTML

<canvas></canvas>

<div id="no-offscreencanvas" style="display: none;">
  <div>Sorry but your browser doesn't appear to support OffscreenCanvas</div>
</div>

CSS

body { margin: 0; }
canvas { width: 100vw; height: 100vh; }

#no-webgl, #no-offscreencanvas {
  position: absolute;
  left: 0;
  top: 0;
  background: red;
  color: white;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

JavaScript

const wsrc = `
self.onmessage = function(evt) {
  const canvas = evt.data.canvas;
  const gl = canvas.getContext("webgl");
  if (!gl) {
    throw new Error('no webgl in worker?')
  }
  gl.clearColor(0,1,1,1);
  gl.clear(gl.COLOR_BUFFER_BIT);
};
`;


function main() {
  const canvas = document.querySelector("canvas");
  if (!canvas.transferControlToOffscreen) {
    document.querySelector("#no-offscreencanvas").style.display = "";
    return;
  }
  const offscreen = canvas.transferControlToOffscreen();

  const blob = new Blob([wsrc], {type: 'application/javascript'});
  const url = URL.createObjectURL(blob)
  const worker = new Worker(url);
  worker.postMessage({canvas: offscreen}, [offscreen]);
}
main();