Unusual behaviour when drawing lots of images onto a large canvas

Question

In this javascript code, I download a bunch of links of images, and then draw them to a canvas in a grid theme. I get the number of links there are, and then set the width and height of the canvas accordingly, so there are 200 images per row. The height is based on the total number images. The problem I am noticing is that based on the height I use, the images show up on the canvas. For example, if I set the height to be 12 rows, then I see the images, but if I set it to be over that, then no images show up. Also even when setting in 1 row, the images only show up in Firefox 23. IE9 and chrome29 shows nothing.

Does anyone know if there is something wrong here, or what is the stable way to drawing lots of images into a large canvas?

Thanks.

function onProfileSuccessMethod(sender, args) {

    alert("Request Arrived");

    var listEnumerator, picCount, item, picobj, path, office, ctx, x, y, imageObj;

    listEnumerator = listItems.getEnumerator();
    picCount = listItems.get_count();


    var w = 125;
    var h = 150;
    var rl = 200;

    var canvas = document.createElement('canvas');
    canvas.id     = "picGallery";
    canvas.width  = w * rl;
    canvas.height = h * 12// * Math.ceil(picCount/rl);
    canvas.style.zIndex = 0;
    canvas.style.border = "0px solid white";
    context = canvas.getContext("2d");

    x = 0;
    y = 0;
    while (listEnumerator.moveNext()) {
        item = listEnumerator.get_current();
        picobj = item.get_item('Picture');
        office = item.get_item('Office');
        office = office == null ? "" : office;

        if (picobj != null) {
            path = picobj.get_url();

            imageObj = new Image();
            imageObj.xcoor = x;
            imageObj.ycoor = y;

            imageObj.src = path;
            imageObj.onload = function() {
                context.drawImage(this, this.xcoor, this.ycoor, w, h);
            };
        }

        x += w;
        if (x == canvas.width) {
            x = 0;
            y += h;
        }
    }

    document.body.appendChild(canvas);
}

Answer 1

Ok, I'm finding evidence for my hunch:

For IE, the renderable size of a canvas is 8192x8192. As per msdn ,

The maximum size of the rendered area on a canvas is from 0,0 to 8192 x 8192 pixels, regardless of the size of the canvas. For example, a canvas is created with a width and height of 8292 pixels. A rectangular fill is then applied as "ctx.fillRect (0,0, canvas.width, canvas.height)".Only the area within the coordinates (0, 0, 8192, 8192) can be rendered, leaving a 100 pixel border on the right and bottom of the canvas

Mozilla's devs have a public discussion , including snippets like "We limit the canvas size when using hardware acceleration, I don't see why it would be limited when not using hardware acceleration."

For Chrome, I found more SO references: drawImage(canvas) chrome size limit?