Question

Sometimes I some errors like this one when I’m working with canvas on Firefox:

Error: uncaught exception: [Exception… “Component returned failure
code: 0x80004005 (NS_ERROR_FAILURE)
[nsIDOMCanvasRenderingContext2D.lineWidth]” nsresult: “0x80004005
(NS_ERROR_FAILURE)” location: “JS frame ::
media/js/canvas/Rectangle.js :: :: line 34” data: no]

It happens when i’m working with more than 5 canvas elements, on a for loop. The function what creates them is this:

function addCanvas(id) {
var canvas = document.getElementById(id);

if (canvas == null) {
    $('#content').append(
        '<canvas id="' + id + '" width="' + workAreaWidth +'" height="' 
            + workAreaHeight + '"></canvas>'
    );

    canvas = document.getElementById(id).getContext('2d');
} else {
    canvas = canvas.getContext('2d');
    canvas.setTransform(1, 0, 0, 1, 0, 0);
    canvas.clearRect(0, 0, workAreaWidth, workAreaHeight);
}   

return canvas;
}

The for loop is in another function.

What happens is that not all the canvas elements are updated. I guess cause of the exception.

I can’t post the code of the place where it exactly fails, cause it fails randomly in many places, always with the same error.

The Firefox version is 9.0, but also happened on 8.0.1. I didn’t test it on previous releases. My operating system is Mac Snow Leopard. I guess it will help. It doesn’t fail on Chrome or Safari,

Thanks for your help.

Answer 1

These error messages are confusing to the uninitiated, but there’s a lot of information packed into them. The important parts are:

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

Ignore the hexadecimal number: this is telling you that the accessor nsIDOMRenderingContext2D.lineWidth returned a generic failure code (NS_ERROR_FAILURE) rather than a line width. nsIDOMRenderingContext2D is the internal name of the C++ class that implements the object you get back from getContext("2d") on a canvas element.

location: “JS frame :: media/js/canvas/Rectangle.js :: :: line 34”

The call from JavaScript into the C++ method that failed is at line 34 of media/js/canvas/Rectangle.js. That’s your code. That is not, however, the code that you quoted, but maybe we can figure out what’s wrong by looking at the code for the accessor that failed: http://mxr.mozilla.org/mozilla-central/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#3180

nsresult
nsCanvasRenderingContext2D::GetLineWidth(float *width)
{
    if (!EnsureSurface())
        return NS_ERROR_FAILURE;

    gfxFloat d = mThebes->CurrentLineWidth();
    *width = static_cast<float>(d);
    return NS_OK;
}

Okay, so the only way that can fail is if EnsureSurface fails. That is defined at http://mxr.mozilla.org/mozilla-central/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#1154 and I’m not going to quote it here because it’s huge and has a whole bunch of ways it can fail. However, it looks to me like one of your canvas elements is either not properly defined, or is not being given a chance to initialize itself (i.e. you need to allow the event loop to run).

EDIT: Concrete advice: Change the function you quoted to be like this:

function addCanvas(id, continuation) {
    if (document.getElementById(id) === null) {
        $('#content').append(
            '<canvas id="' + id + '" width="' + workAreaWidth +'" height="' 
            + workAreaHeight + '"></canvas>'
        );
    }

    setTimeout(function() {
        var canvas = document.getElementById(id).getContext('2d');
        canvas.setTransform(1, 0, 0, 1, 0, 0);
        canvas.clearRect(0, 0, workAreaWidth, workAreaHeight);
        continuation(canvas);
    }, 0);
}

You’ll also need to change all callers to match. I do not guarantee that this will work, but it’s the most plausible thing I can think of.