javascript - Unusual behaviour when drawing lots of images onto a large canvas -

in javascript code, download bunch of links of images, , draw them canvas in grid theme. number of links there are, , set width , height of canvas accordingly, there 200 images per row. height based on total number images. problem noticing based on height use, images show on canvas. example, if set height 12 rows, see images, if set on that, no images show up. when setting in 1 row, images show in firefox 23. ie9 , chrome29 shows nothing.

does know if there wrong here, or stable way drawing lots of images 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); } 

ok, i'm finding evidence hunch:

for ie, renderable size of canvas 8192x8192. per msdn,

the maximum size of rendered area on canvas 0,0 8192 x 8192 pixels, regardless of size of canvas. example, canvas created width , height of 8292 pixels. rectangular fill applied "ctx.fillrect (0,0, canvas.width, canvas.height)".only area within coordinates (0, 0, 8192, 8192) can rendered, leaving 100 pixel border on right , bottom of canvas

mozilla's devs have public discussion, including snippets "we limit canvas size when using hardware acceleration, don't see why limited when not using hardware acceleration."

for chrome, found more references: drawimage(canvas) chrome size limit?