Chrome OffscreenCanvas custom fonts

Question

I am using the new OffscreenCanvas released in Chrome 69 and cannot seem to render custom loaded fonts that render to ordinary canvases just fine.

Is there a trick t

Answer 1

You should be able to use the FontFace and FontFaceSet interfaces of the CSS Font Loading API from within a Worker.

The main difference is that instead of accessing through document.fonts, the FontFaceSet is stored as self.fonts directly.

const worker = new Worker(generateURL(worker_script));
worker.onmessage = e => {
  const img = e.data;
  if(typeof img === 'string') {
    console.error(img);
  }
  else
    renderer.getContext('2d').drawImage(img, 0,0);
};

function generateURL(el) {
  const blob = new Blob([el.textContent]);
  return URL.createObjectURL(blob);
}