Почему я не могу использовать функцию javascript для рисования более одного изображения на холсте html?

Question

У меня есть функция JavaScript, как это:

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);
  }
}

Когда я вызываю эту функцию дважды подряд, например:

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

бар окрашивается дважды, один раз в 0 и один раз в 100
Если я поменяю порядок так, чтобы foo был вызван последним, foo будет нарисован дважды.

Я пытался использовать массив для изображений, как в "c.drawImage (изображения [загружены ++], dx, dy, 100, 100" и два изображения рисуются отдельно, но их порядок случайный.

Есть ли способ использовать такую ​​функцию для рисования изображений на холсте?

Answer 1

Попробуйте изменить:

image = new Image();

до:

var image = new Image();

В настоящее время вы устанавливаете «изображение» в глобальной области видимости, затем потенциально переписываете его обработчик загрузки до того, как произойдет загрузка (что не происходит синхронно).