canvas добавление картинок

[Esigns]

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

// body это картинка - фон 
var body = new Image(), canvas = this.html.canvas, w = canvas.width, h = canvas.height, self = this;
var scr = canvas.getContext('2d');

body.onload = function() {
      //удаляю все с канвы и рисую по новой фон
      scr.clearRect(0, 0, canvas.width, canvas.height);
      scr.drawImage(body, 0, 0, canvas.width, canvas.height); 

      // self.addedAttr - обьект в котором находятся другие обьекты с данными о картинке. Где ее рисовать, ее размер, название и тд. Когда удаляю картинку с канвы удаляю ее из addedAttr и перерисовываю канвас
     for(var key in self.addedAttr) {
          var img = new Image();
          var w = self.addedAttr[key].width; // ширина картинки
          var h =  self.addedAttr[key].height; // высота
          var y = self.addedAttr[key].top, x = self.addedAttr[key].left; // х и у координаты
          img.onload = function() {
               scr.drawImage(img, x, y, w, h);
          }
          img.src = "/images/redactor/attrs/" + self.addedAttr[key].img;
     }
};
body.src = "/images/redactor/bodys/" + this.data.image;

В результате у меня рисуется только 1 картинка на фоне, вместо нескольких.
В чем может быть проблема? Спасибо.

[mta88]

похоже на ошибку с областью видимости переменной
попробуйте запихать тело цикла в замыкание

(function(key) {
    var img = new Image();
    var w = self.addedAttr[key].width;
    var h =  self.addedAttr[key].height;
    var y = self.addedAttr[key].top, x = self.addedAttr[key].left; 
    img.onload = function() {
        scr.drawImage(img, x, y, w, h);
    }
    img.src = "/images/redactor/attrs/" + self.addedAttr[key].img;
})(key);

еще насколько я помню, конструкция "img.onload" сама по себе проблемна
например не срабатывает если изображение уже есть в кешэ

[Esigns]

Спасибо за советы. Я слабовато знаю жс и часто сталкиваюсь с граблями. Посмотрю что можно сделать.
------------------
Проблема была в том что идет загрузка в цикле и когда сработает событие onload цикл уже отработал. Т.е для всех картинок код
self.addedAttr[key] вернет одинаковое значение. Выходит, что я просто добавляю n-раз одно изображение.
Решил это дело записью в свойства картинки всех данных и обращением к ней, например event.target.width .
---------------------------------------