javascript - canvasContext.fillRect 在 Firefox 中抛出 NS_ERROR_FAILURE 异常

Question

我试图在页面顶部绘制一个巨大的 Canvas 矩形(某种灯箱背景)，代码非常简单:

var el = document.createElement('canvas');
el.style.position = 'absolute';
el.style.top  = 0;
el.style.left = 0;
el.style.zIndex = 1000;
el.width  = window.innerWidth + window.scrollMaxX;
el.height = window.innerHeight + window.scrollMaxY;

...
document.body.appendChild(el);

// and later

var ctx = el.getContext("2d");
ctx.fillStyle = "rgba(0, 0, 0, 0.4)";
ctx.fillRect(0, 0, el.width, el.height);

有时(不总是)最后一行抛出:

Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMCanvasRenderingContext2D.fillRect]

我一直在猜测发生这种情况是因为图像大小还是 Canvas 下方的内容类型(例如，嵌入的视频播放)，但显然不是。

所以我正在寻找有关如何隔离和/或解决此问题的任何想法。

Answer 1

查看 nsIDOMCanvasRenderingContext2D.fillRect() implementation (并通过它调用的函数)- 没有太多条件会返回 NS_ERROR_FAILURE。它只会在 EnsureSurface() 或 mThebes->CopyPath() 失败时发生。 EnsureSurface() 中的以下两行很可能是问题的根源:

// Check that the dimensions are sane
if (gfxASurface::CheckSurfaceSize(gfxIntSize(mWidth, mHeight), 0xffff)) {

这里检查的是什么:

• Canvas 的宽度和高度都不能超过 65535 像素。
• 在 Mac OS X 上高度不能超过 32767 像素(平台限制)。
• Canvas 数据的大小(width * height * 4)不能超过 2 GB。

如果违反了这些条件中的任何一个，EnsureSurface() 将返回 false 并因此产生您所看到的异常。请注意，以上是随时可能更改的实现细节，您不应依赖它们。但它们可能会让您了解您的代码违反了哪些特定限制。