Tips for improving HTML5 Canvas Performance

I. Use cache technology to implement pre-drawing and reduce repeated Canvs content painting

Most of the time we draw and update on the Canvas, there will always be some unchanged content, for this content

Cache should be drawn in advance, rather than every refresh.

Directly draw the Code as follows:

[Javascript] ontext. font = "24px Arial ";
Context. fillStyle = "blue ";
Context. fillText ("Please press <Esc> to exit game", 5, 50 );
RequestAnimationFrame (render );

Context. font = "24px Arial ";
Context. fillStyle = "blue ";
Context. fillText ("Please press <Esc> to exit game", 5, 50 );
RequestAnimationFrame (render );
Cache pre-rendering technology:

[Javascript] function render (context ){
Context. drawImage (mText_canvas, 0, 0 );
RequestAnimationFrame (render );
}
 
Function drawText (context ){
MText_canvas = document. createElement ("canvas ");
MText_canvas.width = 450;
MText_canvas.height = 54;
Var m_context = mText_canvas.getContext ("2d ");
M_context.font = "24px Arial ";
M_context.fillStyle = "blue ";
M_context.fillText ("Please press <Esc> to exit game", 5, 50 );
}

Function render (context ){
Context. drawImage (mText_canvas, 0, 0 );
RequestAnimationFrame (render );
}

Function drawText (context ){
MText_canvas = document. createElement ("canvas ");
MText_canvas.width = 450;
MText_canvas.height = 54;
Var m_context = mText_canvas.getContext ("2d ");
M_context.font = "24px Arial ";
M_context.fillStyle = "blue ";
M_context.fillText ("Please press <Esc> to exit game", 5, 50 );
}
When using the Canvas cache rendering technology, remember that the size of the cached Canvas object is smaller than the actual Canvas object.

Size. Try to put the operations of drawing a straight line point together, and try to complete the painting at a time. A bad code is as follows:

[Javascript] for (var I = 0; I <points. length-1; I ++ ){
Var p1 = points [I];
Var p2 = points [I + 1];
Context. beginPath ();
Context. moveTo (p1.x, p1.y );
Context. lineTo (p2.x, p2.y );
Context. stroke ();
}

For (var I = 0; I <points. length-1; I ++ ){
Var p1 = points [I];
Var p2 = points [I + 1];
Context. beginPath ();
Context. moveTo (p1.x, p1.y );
Context. lineTo (p2.x, p2.y );
Context. stroke ();
} The Code with high performance after modification is as follows:

[Javascript] context. beginPath ();
For (var I = 0; I <points. length-1; I ++ ){
Var p1 = points [I];
Var p2 = points [I + 1];
Context. moveTo (p1.x, p1.y );
Context. lineTo (p2.x, p2.y );
}
Context. stroke ();

Context. beginPath ();
For (var I = 0; I <points. length-1; I ++ ){
Var p1 = points [I];
Var p2 = points [I + 1];
Context. moveTo (p1.x, p1.y );
Context. lineTo (p2.x, p2.y );
}
Context. stroke (); Avoid frequent switching between unnecessary Canvas rendering States. An example of a frequent switching between drawing styles is as follows:

[Javascript] var GAP = 10;
For (var I = 0; I <10; I ++ ){
Context. fillStyle = (I % 2? "Blue": "red ");
Context. fillRect (0, I * GAP, 400, GAP );
}

Var GAP = 10;
For (var I = 0; I <10; I ++ ){
Context. fillStyle = (I % 2? "Blue": "red ");
Context. fillRect (0, I * GAP, 400, GAP );
}
To avoid frequent switching of the drawing status, the rendering code with better performance is as follows:

[Javascript] // even
Context. fillStyle = "red ";
For (var I = 0; I <5; I ++ ){
Context. fillRect (0, (I * 2) * GAP, 400, GAP );
}

// Odd
Context. fillStyle = "blue ";
For (var I = 0; I <5; I ++ ){
Context. fillRect (0, (I * 2 + 1) * GAP, 400, GAP );
}

// Even
Context. fillStyle = "red ";
For (var I = 0; I <5; I ++ ){
Context. fillRect (0, (I * 2) * GAP, 400, GAP );
}

// Odd
Context. fillStyle = "blue ";
For (var I = 0; I <5; I ++ ){
Context. fillRect (0, (I * 2 + 1) * GAP, 400, GAP );
}

During painting, only the area to be updated should be drawn, and unnecessary repeated painting and additional overhead should be avoided at any time.

The hierarchical rendering technology is used for drawing complex scenarios, which can be divided into foreground and background. Defines

The HTML is as follows:

[Html] <canvas id = "bg" width = "640" height = "480" style = "position: absolute; z-index: 0">
</Canvas>
<Canvas id = "fg" width = "640" height = "480" style = "position: absolute; z-index: 1">
<SPAN style = "FONT-SIZE: 18px"> </canvas>
</SPAN>

<Canvas id = "bg" width = "640" height = "480" style = "position: absolute; z-index: 0">
</Canvas>
<Canvas id = "fg" width = "640" height = "480" style = "position: absolute; z-index: 1">
</Canvas>

If you do not need it, avoid using special effects, such as shadows and blur.

 

Do not use floating point coordinates.

When drawing a chart, the length and coordinates should be an integer rather than a floating point number, because Canvas supports painting in half pixels.

The interpolation algorithm is implemented based on decimal places to achieve the anti-sawtooth effect of the image. If not necessary, do not select a floating point value.

 

Clear the painting content on the Canvas:

Context. clearRect (0, 0, canvas. width, canvas. height)

However, there is also a hack-like clearing method in Canvas:

Canvas. width = canvas. width;

You can also clear the content on the canvas, but it may not be supported in some browsers.