title: Canvas drawImage not working
body: <p>I am trying to draw an image on HTML canvas:</p>
  
  <pre><code>var mainCanvas = document.getElementById('mainCanvas');
  var ctx = mainCanvas.getContext('2d');
  </code></pre>
  
  <p>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:</p>
  
  <pre><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
  
    }
  });
  </code></pre>
  
  <p>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?</p>
  
  <p>Thank you</p>