Question

I’m trying to load 10 different images into a canvas. My plan is to eventually animate these images but right now they seem to be overwriting one another. Here is my code:

var DrawLetters = function()
{
    for (i = 0; i < howManyLetters; i++)
    {
        thisWidth = letters[i][0];
        thisHeight = letters[i][1];
        imgSrc = letters[i][2];
        letterImg = new Image();
        letterImg.onload = function()
        {
            context.drawImage(letterImg,thisWidth,thisHeight);
        }
        letterImg.src = imgSrc;
    }
};

letters is an array with 10 elements where each element contains a path to the image. Any help on this would be greatly appreciated.

Answer 1

I’ve tried your code and the onload method always use the LAST value of the vars, not the value when the array was iterated.

Try setting the X and the Y to properties of the image object:

// I assume you are storing the coordinates where the letters must be
letterImg.setAtX = letter[i][XPOS];
letterImg.setAtY = letter[i][YPOS];

and on the onload:

context.drawImage(this, this.setAtX, this.setAtY);

this is the image raising the onload event.

Edit I’ve changed the properties used to carry the coordinates. Now they’re setAtX/Y. You cannot use x and y because they’re reserved.