OffscreenCanvas2D resize

by Gregg Tavares

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 ctx = canvas.getContext("2d");
  if (!ctx) {
    throw new Error('no 2d in worker?')
  }
  ctx.canvas.width = 2;
  ctx.canvas.height = 2;
  ctx.fillStyle = 'red';
  ctx.fillRect(0, 0, 1, 1);
};
`;


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();