Необычное поведение при рисовании большого количества изображений на большом холсте

Question

В этом javascript-коде я загружаю кучу ссылок изображений, а затем рисую их на холсте в теме сетки. Я получаю количество ссылок, а затем устанавливаю ширину и высоту холста соответственно, поэтому в каждой строке должно быть 200 изображений. Высота основывается на общем количестве изображений. Проблема, которую я замечаю, заключается в том, что на основе высоты, которую я использую, изображения отображаются на холсте. Например, если я задаю высоту как 12 строк, тогда я вижу изображения, но если бы я установил ее над этим, то изображения не появятся. Также даже при установке в 1 строке изображения отображаются только в Firefox 23. IE9 и chrome29 ничего не показывают.

Кто-нибудь знает, если здесь что-то не так, или что такое стабильный способ рисования большого количества изображений в большой холст?

Спасибо.

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

Хорошо, я найти доказательства моей догадке:

Для IE, то отображаемый размер холста 8192x8192. Согласно msdn,

Максимальный размер оказанной области на холсте составляет от 0,0 до 8192 х 8192 пикселей, независимо от размера холста. Например, холст создается с шириной и высотой 8292 пикселя. Затем прямоугольная заливка применяется как «ctx.fillRect (0,0, canvas.width, canvas.height)». Может отображаться только область внутри координат (0, 0, 8192, 8192), оставляя границу в 100 пикселей на правой и нижней части холста

дэвов Mozilla, имеют public discussion, в том числе фрагменты, как «Мы ​​ограничиваем размер холста при использовании аппаратного ускорения, я не понимаю, почему это было бы ограничено, если не используется аппаратное ускорение. "

Для Chrome, я нашел более SO ссылки: drawImage(canvas) chrome size limit?