INDEX_SIZE_ERR when drawImage on canvas

Question

I need to draw an Image object to a canvas but I've got an INDEX_SIZE_ERR exception in Firefox and IE10 but not in Chrome nor Safari...

According to the W3C: If one of the sw or sh arguments is zero, the implementation must raise an INDEX_SIZE_ERR exception..

Here is the code that causes the problem:

function writePhotoOnCanvas(data, width, height) {
    // Get the canvas
    var canvasGallery = document.getElementById("canvasGallery");
    // Clear the canvas
    canvasGallery.width = canvasGallery.width;
    // Get its context
    var ctxCapture = canvasGallery.getContext("2d");

    // Create an image in order to draw in the canvas
    var img = new Image();
    // Set image width
    img.width = width;
    // Set image height
    img.height = height;

    // To do when the image is loaded
    img.onload = function() {
        console.log("img.width="+img.width+", img.height="+img.height);
        console.log("width="+width+", height="+height+", canvasGallery.width="+canvasGallery.width+", canvasGallery.height="+canvasGallery.height);
        //  Draw the picture
        try {
            ctxCapture.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvasGallery.width, canvasGallery.height);
        } catch(e) {
            console.error(e.message);
        }
    };

    // Set image content from specified photo
    img.src = data;
}

The console shows:

img.width=640, img.height=480
width=640, height=480, canvasGallery.width=589, canvasGallery.height=440
Index or size is negative or greater than the allowed amount

What is the source of the problem?

Thanks

Answer 1

You are manually setting the width and height of the image (img.width = width; img.height = height;). I don't really understand why you are doing this, but it is likely unnecessary.

These should be calculated automatically from the image data you load. Try to remove them to see what the actual size of the data is.

Answer 2

The image width and height are read-only properties so they will cause the code to break in some browser.

If you absolutely want to set the width and height before loading the image you can do:

var img = new Image(width, height);

Then you can read img.width and img.height when image has loaded (or read img.naturalWidth and img.naturalHeight to get the original dimension).

There is no need though to do this. Simply call your drawImage() like this:

ctxCapture.drawImage(img, 0, 0, canvasGallery.width, canvasGallery.height);

This will use the full dimension of the image and scale it to the canvasGallery's dimension.

Tip: If you are using this function to load several images you will want to exchange img with this inside your onload handler.

Modified code:

function writePhotoOnCanvas(data, width, height) {

    var canvasGallery = document.getElementById("canvasGallery");
    var ctxCapture = canvasGallery.getContext("2d");

    /// setting width to clear does not work in all browser, to be sure:
    ctxCapture.clearRect(0, 0, canvasGallery.width, canvasGallery.height);

    var img = new Image();
    img.onload = function() {
        //  Draw the picture
        try {
            ctxCapture.drawImage(this, 0, 0,
                                     canvasGallery.width, canvasGallery.height);
        } catch(e) {
            console.error(e.message);
        }
    };

    // Set image content from specified photo
    img.src = data;
}