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

• 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.