Невозможно нарисовать несколько копий одного и того же изображения на холсте?

Question

У меня проблема, с которой я не могу найти решение. У меня есть изображение, которое я хочу рисовать несколько раз на моем холсте. Для этого у меня есть массив для каждого места, на котором я хочу нарисовать это изображение.

Но похоже, что JavaScript должен нарисовать изображение, из чего-то исчезает старое? Зачем?

Вот код делает неприятность:

function drawPoints() { 
var map = getMapArray(); 
var counter = 0; 
for(var i = 1; i <= map.length; i++) { 
    for(var j = 1; j <= entry.length; j++) { 
     counter++; 
     for(var q = 0; q < points.length; q++) { 
      if(counter == points[q] && points[q] != 0) { 
       var point = new Image(); 
       point.src="./img/point.png"; 
       point.addEventListener("load", function(){canvas.drawImage(point, (j-1)*40, (i-1)*40)}, false); 
      } 
     } 
    } 
} 
} 

Логика прекрасно работает, и петли через него, как это должно быть. Его функция drawimage внутри eventlistener, которая не печатает изображение, как я надеялся. Я не знаю, как это сделать в противном случае?

Если у вас, ребята, есть лучшее решение для этого, чем призывать eventlister все время, пожалуйста, поделитесь своим knowlegde. Спасибо, совет.

Кстати, как я уже говорил ранее: функция работает нормально, но все просто белое, возможно, из-за того, что оно удаляет старое изображение для нового, и для меня слишком короткий интервал, чтобы увидеть какое-либо действие.

Ссылка на живой сценарий: http://picturds.com/pacman_serious/

Answer 1

Вместо того чтобы слушать на изображение каждый раз, когда вы рисуете, вы, вероятно, хотите:

1. магазин изображения в трех глобальных переменных (pacman, призрак, точка)
2. начните с фазой загрузки, где вы загрузить все изображения
3. После загрузки изображения, запустите таймер игр
4. В игровом цикле нарисуйте изображения напрямую с помощью canvas.drawImage()