为何Safari中createPattern与ImageBitmap配合无法正常工作？

根据MDN文档说明，ImageBitmap是CanvasRenderingContext2D.createPattern()的支持参数，且Safari被标注为完全支持。但在以下示例代码中用ImageBitmap替代canvas元素时，Safari会抛出未知TypeError，其他浏览器则可正常运行。目前未找到相关问题记录，请问这是浏览器Bug还是文档存在遗漏？

问题复现代码 #

// Create a pattern, offscreen
const patternCanvas = document.createElement("canvas");
const patternContext = patternCanvas.getContext("2d");

// Give the pattern a width and height of 50
patternCanvas.width = 50;
patternCanvas.height = 50;

// Give the pattern a background color and draw an arc
patternContext.fillStyle = "#fec";
patternContext.fillRect(0, 0, patternCanvas.width, patternCanvas.height);
patternContext.arc(0, 0, 50, 0, 0.5 * Math.PI);
patternContext.stroke();

const bmp = createImageBitmap(patternCanvas);

bmp.then(bmp => {
  // Create our primary canvas and fill it with the pattern
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  const pattern = ctx.createPattern(bmp, "repeat");
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // Add our primary canvas to the webpage
  document.body.appendChild(canvas);
});

结论与解决方案 #

这是Safari的浏览器实现Bug，MDN文档的兼容性标注存在不准确的地方。Safari虽然在文档中被标注为支持ImageBitmap作为createPattern()的参数，但实际运行时无法正确解析该类型的输入，从而抛出TypeError。

规避方案 #

将ImageBitmap绘制到一个临时canvas元素，再使用这个canvas作为createPattern()的参数，即可在Safari中正常运行：

// Create a pattern, offscreen
const patternCanvas = document.createElement("canvas");
const patternContext = patternCanvas.getContext("2d");

// Give the pattern a width and height of 50
patternCanvas.width = 50;
patternCanvas.height = 50;

// Give the pattern a background color and draw an arc
patternContext.fillStyle = "#fec";
patternContext.fillRect(0, 0, patternCanvas.width, patternCanvas.height);
patternContext.arc(0, 0, 50, 0, 0.5 * Math.PI);
patternContext.stroke();

const bmp = createImageBitmap(patternCanvas);

bmp.then(bmp => {
  // 创建临时canvas规避Safari的Bug
  const tempCanvas = document.createElement("canvas");
  tempCanvas.width = bmp.width;
  tempCanvas.height = bmp.height;
  const tempCtx = tempCanvas.getContext("2d");
  tempCtx.drawImage(bmp, 0, 0);

  // 创建主画布并填充图案
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  // 使用临时canvas作为图案源
  const pattern = ctx.createPattern(tempCanvas, "repeat");
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // 将主画布添加到页面
  document.body.appendChild(canvas);
});

内容的提问来源于stack exchange，提问作者riv