javascript - 如何判断屏幕外 Canvas 上的 2D 上下文是否可用？

Question

我正在尝试使用离屏 Canvas 在 webworker 中进行渲染，这在 Chrome 中工作得很好，但 Firefox 中似乎尚不提供 2D 上下文。我如何提前知道这一点？当我开始创建上下文时，已经太晚了，原始 Canvas 不再具有绘图功能。

基本上我在做什么

const offscreen = canvas.transferControlToOffscreen();
worker.postMessage({canvas: offscreen});
...
// in worker
canvas.getContext("2d") // exception!
// but there's no fallback now, because we already called transferControlToOffscreen

编辑:不知何故，我没有想到在对主要 Canvas 进行“实验”之前创建另一个 Canvas 并将其置于屏幕外。这可行，但看起来像是一个黑客。

Answer 1

OffscreenCanvas.getContext('2d') 返回的上下文是 OffscreenCanvasRenderingContext2D实例。
支持此调用的浏览器将提供此接口(interface)，因此您需要的是:

const supports = typeof OffscreenCanvasRenderingContext2D === "function";

console.log(`Your browser ${supports ? "supports" : "doesn't support" } the 2d context of the OffscreenCanvas`);