OffscreenCanvas-text-FontFace-in-worker.html

<!DOCTYPE html>
<html>
<body>
<canvas id='output' width='100' height='100'></canvas>
<script id='worker' type='text/worker'>
  var ofc = new OffscreenCanvas(100, 100);
  var ctx = ofc.getContext("2d");
  draw(false);
  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      draw(true);
    });
  });

  function draw(send) {
    ctx.clearRect(0, 0, 100, 100);
    ctx.font = "50px Ahem";
    ctx.textBaseline = "top";
    ctx.fillStyle = "red";
    ctx.fillText("X", 0, 0);

    if (!send) return;

    var im = ofc.transferToImageBitmap();
    self.postMessage(im, [im]);
  }
</script>

<script>
if (window.testRunner) {
  testRunner.waitUntilDone();
}
var blob = new Blob([document.getElementById('worker').textContent]);
var worker = new Worker(URL.createObjectURL(blob));

worker.addEventListener('message', ev => {
  var im = ev.data;
  var ctx = document.getElementById("output").getContext("bitmaprenderer");
  ctx.transferFromImageBitmap(im);
  if (window.testRunner) {
    testRunner.notifyDone();
  }
});

</script>
</body>
</html>

chromium/third_party/blink/web_tests/fast/canvas/OffscreenCanvas-text-FontFace-in-worker.html