Question

I have a javascript function like this:

function drawImage(canvas, image_source, dx, dy) {
  image = new Image();
  image.src = image_source;  
  image.onload = function() {
    c=canvas.getContext("2d");
    c.drawImage(image,dx,dy,100,100);
  }
}

When I call this function twice in a row, eg:

drawImage(canvas, "foo.jpg", 0, 0);
drawImage(canvas, "bar.jpg", 0 ,100);

bar gets painted twice, once at 0, and once at 100
If I switch the order so that foo is called last, foo gets painted twice.

I’ve tried to use an array for the images as in “c.drawImage(images[loaded++], dx, dy, 100, 100” and the two images paint separately, but their orders are random.

Is there any way to use a function like this to paint images on a canvas?

Answer 1

Try changing:

image = new Image();

to:

var image = new Image();

Currently you’re setting “image” in the global scope, then potentially rewriting its onload handler before the load (which doesn’t happen synchronously) has happened.