Question

I am having trouble drawing an animation on a HTML 5 canvas inside a loop. I have created a javascript animation function/class that stores frames and duration information and provides a get function to getFrame()[returns image] sub-function to retrieve the relevant frame. This works perfectly fine so i haven’t included the full script. If anyone wants or needs it i will send to you.

When i call the following code it displays the animation as intended.

canvas.drawImage(tile1a.getFrame(),50,60);
canvas.drawImage(tile1a.getFrame(),50,90);
canvas.drawImage(tile1a.getFrame(),50,120);
//etc

This isn’t very efficient as i want to draw a lot of tiles is column so it would be better to use a for loop. Therefore i tried the following code but the page just keeps crashing.

for (i=1;i<=10;i++)
    {
        canvas.drawImage(tile1a.getFrame(),FIELD_WIDTH,i*30);
    }

However, i then tried the following which worked:

var temp = tile1a.getFrame();
for (i=1;i<=10;i++)
    {
        canvas.drawImage(temp,FIELD_WIDTH,i*30);
    }

So the problem is definitely something to with me calling getFrame() within the for loop. I recon it is probably something really stupid but i can’t figure it out!

Any help is much appreciated.
thanks
Jason

Answer 1

I think I figured it out. The loop in your draw function is set up like this:

for (i=1; i<=10; i++) {
    // ...
}

Notice that you didn’t create the i variable with the var keyword! That means that it will be a global variable!

Now look at the loop in your getFrame function:

for (i=0; i<this.frames.length; i++) {
    // ...
}

The i in that loop is also global…

Your getFrame function is making sure that i will always be reset to 4 (because you only have four frames in it)!

The quick fix is to add some vars:

// in the `draw` function, for example
for (var i = 1; i <= 10; i++) {
    // ...
}