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.

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.

• javascript
• image
• html
• canvas

• Do you realize that you're using global variables inside your for loop? – Phrogz Commented Apr 14, 2011 at 15:49
• I do. This is just a proof of concept at the moment and not meant to pass a JSLint analysis. I just wanted to get the pieces functioning to prove I could do what I was trying to do before writing it full scale. – Dexter Commented Apr 15, 2011 at 12:57

3 Answers 3

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.

You're drawing them on the same point. drawImage doesn't care about the height or width with your given parameters; it just wants an image and a coordinate. See https://developer.mozilla/en/Canvas_tutorial/Using_images

So, you're gonna need to give your images more data; something like:

    thisWidth = letters[i][0];
    thisHeight = letters[i][1];
    imgSrc = letters[i][2];
    thisX = letters[i][3]; //<---
    thisY = letters[i][4]; //<---
    letterImg = new Image();
    letterImg.onload = function()
    {
        context.drawImage(letterImg, thisX, thisY, thisWidth, thisHeight);
        //or, just
        context.drawImage(letterImg, thisX, thisY);
    }
    letterImg.src = imgSrc;

Edit: Just had a thought - you can do it dymagically:

context.drawImage(letterImg, letters[i-1][0]+thisWidth, letters[i-1]+thisHeight, thisWidth, thisHeight);

With this way you'll have to check for stuff, but I think you get the overall intention.

You have to reposition the draw start position every time so the images arent overwritten.

[context . drawImage(image, dx, dy, dw, dh)][1]

There's an image on the link explaning what every parameter means.