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

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, которая не печатает изображение, как я надеялся.Я не знаю, как это сделать иначе?

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

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

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

Answer 1

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

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