Canvas Performance Drop After A Few Seconds

I wrote the following 1000 bounding squares demo as a test of the capabilities of HTML5 canvas. It runs fine at first but then a noticeable drop in fps after a few seconds. I am no

Solution 1:

A few suggestions:

Use image.onload to be sure your square.png is fully loaded before it's used.

Put the image loading at the bottom of your code after you create your 1000 sprites.

var image=new Image();
image.onload=function(){
    draw();
}
image.src="square.png";

Don't iterate using for(i in SpriteList). Do this instead:

for(var i=0;i<SpriteList.length;i++)

Your draw functions are probably stacking--the current draw() isn't being completed before setInterval is requesting another draw().

Replace setInterval with requestAnimationFrame to stop your stacking problems.

function draw(){

    // request another animation frame
    requestAnimationFrame(draw);

    // draw the current frame
    clear();
    for(var i=0;i<SpriteList.length;i++)
    {
        var s = SpriteList[i];
        s.update();
        context.drawImage(image, s.x, s.y);
    }
}