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

So each image is 125x150 pixels? Because you're setting the canvas width to be 125 * 200 = 25000 pixels and the height to a much more reasonable 150 * 12 = 1800 pixels. — Scott Mermelstein, Jul 10 '13 at 19:42
That is irrelavant, but if you must know, its a Microsoft SharePoint client object model function for enumerating through objects returned from an ajax request (ecma scripting). — omega, Jul 10 '13 at 19:43
@Scott, each picture will be drawn as 125x150 pixels, but its original size is bigger. I set that width because I want 200 pics per row, and the height is supposed to be `h * Math.ceil(picCount/rl)`, but I noticed that no images load then. So I tried something smaller `h * 12`, and only Firefox can see the images then... — omega, Jul 10 '13 at 19:46
I can't find anywhere in the spec where canvas size is limited, but my hunch is that 25000 pixels is too much. Here's a SO that seems to corroborate my hunch - the symptoms you describe match those mentioned: http://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element — Scott Mermelstein, Jul 10 '13 at 19:54
I found this: (see link on bottom) http://stackoverflow.com/questions/8404937/drawing-multiple-images-on-one-canvas Im going to give this a try, maybe it could work for me. — omega, Jul 10 '13 at 19:59
Might I respectfully recommend that you redesign your app to show fewer images at once. A user will lose focus (and maybe lose interest) if they are viewing 200*12=2400 or more images. Maybe group the images and let the user explore the groups they are interested in. — markE, Jul 10 '13 at 20:26

score 1 · Answer 1 · edited May 23 '17 at 10:32

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?

ok, I think my canvas is just too big, so I will just split them up into several canvases, of maximum size 8192x8192, then it should work with all browsers. — omega, Jul 10 '13 at 20:44

Unusual behaviour when drawing lots of images onto a large canvas

1 Answers1