Question

I am trying to add multiple images to Html5 canvas but every time I try to remove the last image and show the most recent one it fails. Here’s my code:

var imgArray = ['abc.png','455.jpg'];
    for(i = 0; i < 2; i++){
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext("2d");
        var imageObj = new Image();
        imageObj.src = imgArray[i];
        imageObj.onload = function() {
        context.drawImage(this,0,0);
    };
}

If I run this code, it shows the 2nd image on the canvas and removes the first one. Is there any way to retain both the images?

Answer 1

Actually onLoad always uses last value of the variables.
So store (calculate) img x, y coordinates before. Smth like this:

imageObj.setAtX = i * 10;
imageObj.setAtY = i * 10;
imageObj.onload = function() {
     context.drawImage(this, this.setAtX, this.setAtY);
};