Question

I am trying to draw an image on HTML canvas:

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

I make an ajax request, and parse xml data that I get from it (works perfectly), and later when I draw different shapes on canvas it also works 100%.
What does not work is an image drawing in the following piece of code:

$(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

  }
});

I checked with Chrome Developer Tools that image is loading; also, alert in .onload is being called. The code is not working in both Chrome and FF.
What might be the problem here?

Thank you

Answer 1

The bug is likely caused by the absence of var at your assignments. In the loop, you keep overwriting the type, x and y variables. Prefix them by var to solve your problem.

See also: What is the purpose of the var keyword and when to use it (or omit it)?

$(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: For debugging purposes, I recommend to use console.log over alert.