canvasContext.fillRect在Firefox中抛出NS_ERROR_FAILURE异常

Question

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

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);

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

组件返回失败代码:0x80004005(NS_ERROR_FAILURE)[nsIDOMCanvasRenderingContext2D.fillRect]

我一直猜测是因为图像大小还是因为画布下面的内容类型(例如嵌入式视频播放)而发生这种情况,但显然不是.

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

Answer 1

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

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

在这里检查什么:

• 画布的宽度和高度都不能超过65535像素.
• Mac OS X上的高度不能超过32767像素(平台限制).
• canvas data(width * height * 4)的大小不能超过2 GB.

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