Canvas drawImage не работает

Question

Я пытаюсь нарисовать изображение на холсте HTML:

var mainCanvas = document.getElementById('mainCanvas');
var ctx = mainCanvas.getContext('2d');

Я делаю запрос ajax и анализирую получаемые из него данные XML (работает отлично), а затем, когда рисую разные фигурына холсте это тоже работает на 100%.Не работает рисование изображения в следующем фрагменте кода:

$(data).find('Object').each(function(){
  type = $(this).attr('type');
  x = $(this).attr('X');
  y = $(this).attr('Y');
  switch(type){
    case '2':
    height = h_panel;
    width = w_panel;
    ctx.fillStyle = sColor;
    ctx.fillRect(x,y,width,height);
    break;
    case '1':
    var powerFactoryImg = new Image();
    powerFactoryImg.onload = function(){
      alert('test');
      ctx.drawImage(powerFactoryImg,x,y,90,80);
    };
    powerFactoryImg.src = 'images/power_factory.png';
    break;

   //Other cases go here - they draw rectangles - all of them work

  }
});

Я проверил с помощью Chrome Developer Tools, что изображение загружается;также вызывается оповещение в .onload.Код не работает ни в Chrome, ни в FF.В чем может быть проблема здесь?

Спасибо

Answer 1

Ошибка, вероятно, вызвана отсутствием var в ваших назначениях. В цикле вы перезаписываете переменные type, x и y. Префикс их var, чтобы решить вашу проблему.

См. Также: Какова цель ключевого слова var и когда его использовать (или не указывать)?

$(data).find('Object').each(function(){
  var type = $(this).attr('type');//<-- var
  var x = $(this).attr('X');      //<-- var
  var y = $(this).attr('Y');      //<-- var
  switch(type){
    case '2':
       var height = h_panel;  // <-- var
       var width = w_panel;   // <-- var
       ctx.fillStyle = sColor;
       ctx.fillRect(x,y,width,height);
    break;
    case '1':
       var powerFactoryImg = new Image();
       powerFactoryImg.onload = function(){
           alert('test: ' + [x, y]); //<-- "test" is not very useful. Add [x,y]
           ctx.drawImage(powerFactoryImg,x,y,90,80);
       };
       powerFactoryImg.src = 'images/power_factory.png';
    break;

    //Other cases go here - they draw rectangles - all of them work

   }
});

PS: для целей отладки я рекомендую использовать console.log over alert.