Optimizing Html5 Canvas Game

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 logic loop ru

Solution 1:

• if you use floating values for sprite coordinates, try converting them to integers. that will cost you losing subpixel rendering but you will gain a lot of speed.
• don't use images with odd widths. always use widths as powers of 2.
• this one is hard to implement in some cases but if your game is suitable, don't clear screen and redraw everything each frame. instead, draw changed parts.
• if you have to clear the canvas, don't draw a blank rectangle. try setting the canvas width/height again with the same size. that should reset the pixels faster than rectangle drawing.

rest of the methods i can suggest are not HTML5 canvas dependent but general subjects like using bit shiftings, inverse loops, and operator instead of modulo when possible, precalculations etc.

Solution 2:

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.

Solution 3:

I heard that setInterval will cause loops to overlap if one isn't finished yet.

This is false, JavaScript is single threaded. This means that if your first interval is still running when it hits the next step, the next step will be delayed until the first step has finished computing. This also means that you can't rely on setInterval to be accurate if you start doing a lot of computations.

Solution 4:

I'd echo much of all has been said by other people. Integer values, use request animation frame, etc. If drawing text be careful how often you set fonts. Also you might find using an object pool can help if you are creating lots of temporary objects per frame.

As a general read on game loops I'd recommend this: http://www.koonsolo.com/news/dewitters-gameloop/