Canvas drawImage not working

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

Given that the image is being loaded either the problem lies somewhere else and not in the code you provided or you're drawing the image outside the canvas boundaires so you can't see it. Or maybe drawing something over it? — Delta, Mar 04 '12 at 19:01
check values of x and y in onload: alert('test: ' + x + ', ' + y); — Serj-Tm, Mar 04 '12 at 19:06

score 3 · Accepted Answer · edited May 23 '17 at 12:21

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.

This worked great, thanks a lot! X and Y were undefined before. But I still have trouble understanding how overwriting could cause that. If X and Y values were global and overwritten many times why they could not be read properly and ended up undefined when read? — ZenJ, Mar 05 '12 at 19:19
@doktor The `.onload` event listener is deferred, and executed when the image has loaded. Before the first image has loaded, the `.each` loop has already finished, causing the nearest (global?) `x` and `y` variables to be equal to the latest `x` and `y` attributes. So, only one line is drawed. As a result, you think that "nothing" happens, while, in fact, the same line is drawn multiple times. Locally declaring the variables solves the problem, because each `onload` handler will then correctly resolve `x` and `y`. — Rob W, Mar 05 '12 at 20:05

Canvas drawImage not working

1 Answers1