Skip to main content
added link to article explaining technique in detail
Source Link

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);

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:

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);

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);
added link to explanation of the drawImage function
Source Link

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:

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);

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.

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);

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:

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);
Source Link

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.

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);