Проблема с циклом/областью JavaScript с Image.onload()

Question

Я пытаюсь пропустить объект с JavaScript и добавить все подобъекты из этого объекта в холст HTML5.

Брезент-бит работает, никаких проблем с этим, но по какой-то причине все мои изображения в конечном итоге имеют одинаковый размер - размер последнего подобъекта «фон». Я предполагаю, что это связано с объемом моего цикла и «этого», но я не могу понять, что нужно изменить;

var stage; 
var items = { 
    head: {image: null, path: "images/avatar-elements/head01.png", w:200, h:200}, 
    hair: {image: null, path: "images/avatar-elements/hair01.png", w:200, h:200}, 
    nose: {image: null, path: "images/avatar-elements/nose01.png", w:200, h:200}, 
    eyes: {image: null, path: "images/avatar-elements/eyes01.png", w:200, h:200}, 
    eyebrows: {image: null, path: "images/avatar-elements/eyebrows01.png", w:200, h:200}, 
    ears: {image: null, path: "images/avatar-elements/ears01.png", w:200, h:200}, 
    background: {image: null, path: "images/avatar-elements/background01.png", w:500, h:370} 
}; 

function initCanvas() { 
    stage = new Kinetic.Stage("canvas", 500, 370); 
    makeBasis(); 
} 


function makeBasis() { 
    for(i in items) { 
     var img = new Image(); 
     img.onload = function() { 
      items[i].image = makeCanvasImage(this, items[i].w, items[i].h); 
     } 
     img.src = items[i].path; 
    } 


} 

function makeCanvasImage(tar, w, h) { 
    var theImage = new Kinetic.Image({ 
     imageObj: tar, 
     x: 250 - (w/2), 
     y: 185 - (h/2), 
     width: w, 
     height: h 
    }); 
    stage.add(theImage); 
    return theImage; 
} 

initCanvas(); 

Answer 1

Ошибка в makeBasis(). После циклизации на всех изображениях i задана последняя - классическая проблема закрытия. Попробуйте использовать это:

function makeBasis() { 
    for(i in items) { 
     var img = new Image(); 
     img.onload = (function (nr) { 
      return function() { 
       items[nr].image = makeCanvasImage(this, items[nr].w, items[nr].h); 
      } 
     }(i));  
     img.src = items[i].path; 
    } 
}