OffscreenCanvas-fillRect-in-worker.html

<!DOCTYPE html>
<html>
<body>
<canvas id='output1' width='100' height='100' style='background:red'></canvas>
<canvas id='output2' width='100' height='100' style='background:red'></canvas>
<canvas id='output3' width='100' height='100' style='background:red'></canvas>
<script id='myWorker' type='text/worker'>
self.onmessage = function(e) {
  var aCanvas = new OffscreenCanvas(100, 100);
  var ctx = aCanvas.getContext('2d');
  ctx.fillStyle = 'green';
  ctx.fillRect(0, 0, 100, 100);
  var image1 = aCanvas.transferToImageBitmap();

  ctx.fillStyle = '#D359FE';
  ctx.fillRect(0, 0, 100, 100);
  var image2 = aCanvas.transferToImageBitmap();

  ctx.fillStyle = 'rgb(150,250,100)';
  ctx.fillRect(0, 0, 100, 100);
  var image3 = aCanvas.transferToImageBitmap();

  self.postMessage(
    { i1: image1,
      i2: image2,
      i3: image3 },
    [ image1, image2, image3 ]);
};
</script>

<script>
if (window.testRunner) {
  testRunner.waitUntilDone();
}
var blob = new Blob([document.getElementById('myWorker').textContent]);
var worker = new Worker(URL.createObjectURL(blob));
worker.addEventListener('message', msg => {
  var outputCtx1 = document.getElementById('output1').getContext('bitmaprenderer');
  outputCtx1.transferFromImageBitmap(msg.data.i1);
  var outputCtx2 = document.getElementById('output2').getContext('bitmaprenderer');
  outputCtx2.transferFromImageBitmap(msg.data.i2);
  var outputCtx3 = document.getElementById('output3').getContext('bitmaprenderer');
  outputCtx3.transferFromImageBitmap(msg.data.i3);

  if (window.testRunner) {
    testRunner.notifyDone();
  }
});
worker.postMessage("");
</script>
</body>
</html>
chromium/third_party/blink/web_tests/fast/canvas/OffscreenCanvas-fillRect-in-worker.html
