javascript холст рисование изображения

Это проблема закрытия. Поскольку загрузка изображения является асинхронной, значения, которые все еще ссылаются на родительскую область внутри обработчика, больше не содержат значений, которые вы ожидаете от них.

Для этого вам понадобится способ удерживать это значение до тех пор, пока изображение не загрузится должным образом. Вы можете использовать закрытие или как здесь привязку -

function handler() {
  var i = this.i;
  ctx.drawImage(this.img_src, 
                this.r * tileSize, 
                this.c * tileSize, 
                tileSize * tileList[i].qw, tileSize * tileList[i].qh);
}

Обратите внимание, что он принимает ссылку на объект. Теперь внутри цикла мы можем сделать:

for (var i = 0; i < tileList.length; i++) {
   var o = {
     img_src: new Image,
     c: tileList[i].y,
     r: tileList[i].x,
     i: i
   };   
   o.img_src.onload = handler.bind(o);  // bind this object (o)
   o.img_src.src = './viewer/images/'+path+'/LOD'+glod+'/tiles_'+ c + '_' + r +'.jpeg';
}

Итак, мы создаем новый экземпляр объекта внутри цикла. Сохраняем нужные нам данные на потом. Затем мы устанавливаем обработчик, но привязанный к объекту, который будет хранить его в памяти до тех пор, пока мы не перестанем на него ссылаться. Привязка также позволяет нам использовать this для ссылки на исходный объект, который мы создали для обработчика.

Это чистый подход, он не требует анонимных функций и не мешает самому объекту изображения.

Пример концептуального кода

// conceptual example
var ctx = c.getContext("2d"),
    list = [  // pseudo list serving this example
      {x:2, y:5, src: "//i.imgur.com/kPX1264b.jpg"},
      {x: 160, y:7, src: "//i.imgur.com/IgPTywZb.jpg"}
    ];

function handler() {
  console.log(this.i, this.r, this.c, this.img_src.src);
  ctx.drawImage(this.img_src, this.r, this.c);
}

for (i=0; i < list.length; i++) {
  var o = {
    img_src: new Image,
    c: list[i].y,
    r: list[i].x,
    i: i
  };   
  o.img_src.onload = handler.bind(o);  // bind this object (o)
  o.img_src.src = list[i].src;
}

<canvas id=c></canvas>

Также см. эту тему для других подходов.

Ресурсы:

• Замыкания
• bind()