Optimizing html5 canvas game

Question

Right now I\'ve got two game loops in a game I\'m making. A draw loop that loops through an array of objects on screen and a logic loop that does game logic. I have the logi

Answer 1

Oh geez, I could probably write you a full sonnet here if you posted all your code. Here's a quick rundown:

Read Emir's answer. All of those are good except the last one which is very dependent on the situation. Setting canvas.width = canvas.width to clear the canvas can be faster on some browsers but it also clobbers all canvas state (ie the last set fill and font) which can slow things down because setting those properties is actually painfully slow.

Read my articles on Canvas performance: http://simonsarris.com/blog/tag/performance

I have a lot of other tips saved up in a private document that I'm writing a small ebook out of. If you want early access to it I can probably allow that.

Pick up High performance JavaScript by Zakas and read it.

Don't use save() and restore() like you are in the quoted code unless you must. They are just slowing things down.

For the timer see http://paulirish.com/2011/requestanimationframe-for-smart-animating/

Multiple canvases for foreground-background-middleground can definitely help. Caching things on in-memory canvases can definitely help. It all depends on what you're drawing.

A lot of performance problems are due to death by a thousand tiny cuts. For instance:

        vs.scenegraph[i].update();
        vs.scenegraph[i].draw();
        vs.scenegraph[i].drawScript();

To

        var scene = vs.scenegraph[i];
        scene.update();
        scene.draw();
        scene.drawScript();

Will help a minute amount. How many opportunities for minute-amount stuff you have I don't know - we'd need to see a lot more code.