Experience on HTML5 Canvas Performance Improvement

Comments: This article will explain how to use the cache technology to implement pre-rendering, reduce repeated painting of Canvs content, and avoid using floating point coordinates to Improve the Performance of HTML5 Canvas. If you are interested, refer to the following, hope to help youUse cache technology to implement pre-draw 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:

The Code is as follows:
Context. font = "24px Arial ";
Context. fillStyle = "blue ";
Context. fillText ("Please press <Esc> to exit game", 5, 50 );
RequestAnimationFrame (render );

Cache pre-rendering technology:

The Code is as follows:
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, you must remember that the size of the cached Canvas object is smaller than the actual Canvas 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:

The Code is as follows:
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:

The Code is as follows:
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 statuses. An example of a frequent switching between drawing styles is as follows:

The Code is as follows:
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:

The Code is as follows:
// 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:

The Code is as follows:
<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>

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

Avoid using floating point coordinates
When drawing a graphic, the length and coordinates should be an integer rather than a floating point number, because Canvas supports the painting of half a pixel and implements the Interpolation Algorithm Based on decimal places to achieve the anti-sawtooth effect of the image, do not select a floating point value if you do not need it.

Clear the drawing 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.