<!DOCTYPE html>
<html>
<body>
<canvas id='output' width='100' height='100'></canvas>

<script id='myWorker' type='text/worker'>
self.onmessage = function(e) {
  var aCanvas = new OffscreenCanvas(100, 100);
  var ctx = aCanvas.getContext('2d');
  ctx.strokeStyle = 'green';
  ctx.strokeRect(25, 25, 50, 50);
  var image = aCanvas.transferToImageBitmap();
  self.postMessage(image, [image]);
};
</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 outputCtx = document.getElementById('output').getContext('bitmaprenderer');
  outputCtx.transferFromImageBitmap(msg.data);
  if (window.testRunner) {
    testRunner.notifyDone();
  }
});
worker.postMessage("");
</script>
</body>
</html>