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

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

• javascript
• html
• canvas
• html5-canvas

Share Improve this question Follow asked Mar 4, 2012 at 18:54 ZenJZenJ 31144 silver badges1515 bronze badges 2

• 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 Commented Mar 4, 2012 at 19:01
• 1 check values of x and y in onload: alert('test: ' + x + ', ' + y); – Serj-Tm Commented Mar 4, 2012 at 19:06

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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 remend to use console.log over alert.