How to fallback of OffscreenCanvas

Hi,

I try to use OffscreenCanvas when available and fallback to normal Canvas when donโ€™t (Safari). But I encounter a problem with Observable who throw an error because OffscreenCanvas is not defined.

First method

// ๐Ÿ˜” Error on Safari => intercept by Observable as a variable not defined
  if (typeof OffscreenCanvas !== "undefined") {
      canvas = new OffscreenCanvas(...size); 
  } else {
      canvas = document.createElement("canvas");
      canvas.width = canvas.height = size;
  }

Second method

if (typeof HTMLCanvasElement.prototype.transferControlToOffscreen !== "undefined") {
      // ๐Ÿ˜” Error on Safari => intercept by Observable as a variable not defined
      canvas = new OffscreenCanvas(...size); 
} else {
      canvas = document.createElement("canvas");
      canvas.width = canvas.height = size;
}

See this notebook

Thanks!

Check for (and reference) window.OffscreenCanvas instead.

2 Likes

Thank you @mootari! I updated the notebook with your solution.