Continuing from your last comment 'drawPlayer is one of the culprits', you use graph
for drawing operations. The graph
context is a huge bitmap to manipulate since it is as big as the screen:
graph.fillRect(0, 0, screenWidth, screenHeight);
To rotate and translate such a big bitmap costs a lot of memory and processing power.
In such cases I recommend using the following technique:
Create an 'offscreen' canvas with the same width and height of the player image and draw your player on that context. If you want to rotate within your offscreen canvas, make sure the rotated image fits in the offscreen canvas.
After that, you draw the content of your offscreen canvas onto your main stage.
You can write the contents of a canvas on another canvas with the drawImage function:
In this article the technique called pre-rendering is explained further with a mario character resembling your 'player'.
Other remarks about your drawplayer routine:
Use length caching with for loops : store the length in a variable:
for (var z = 0; z < playersToDraw.length; z++) {
var len = playersToDraw.length;
for (var z = 0; z < len; z++) {
or:
for(var z=0, len=playersToDraw.length; z < len; z++){
Another thing, just as N74 mentioned, don't copy the variable if it is not really nescessary.
Don't use this:
playerC = playersToDraw[z];
playerC.blabla
Just use:
playersToDraw[z].blabla
And another thing, move the line:
scale = radiusD;
Out of the for-loop, now it runs every iteration and that isn't nescessary. Or instead of:
var radiusD = (playerRadius * 2.0);
use this at once and be done with it:
var scale = (playerRadius * 2.0);