Question

I have a problem which I can’t find a solution to. I have an image that I want to draw multiple times on my canvas. For that I have an array for every place I want to draw that image on.

But it seems when JavaScript ought to draw the image something makes the old one disappear? Why?

Here is the code making the troubles:

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

The logic works perfectly, and it loops through it as it should.
Its the drawimage function inside the eventlistener that doesn’t print the image as I hoped. I don’t know how to do it otherwise?

If you guys have a better solution to this than calling an eventlistener all the time please share your knowlegde. Thanks in advice.

Btw, as I’ve said earlier: the function runs fine but everything is just white, probably due it removes the old image for the new and the interval is too short for me to see any action.

Link to the live script:
http://picturds.com/pacman_serious/

Answer 1

Instead of listening on the image every time you draw, you probably want to:

1. Store the images in three global variables (pacman, ghost, point)
2. Start with a loading phase where you load all the images
3. Once the images are loaded, start your game timer
4. In the game loop, draw the images directly with canvas.drawImage()