Share experience in HTML5 Canvas performance improvement skills

Comment: This article explains how to use cache technology to implement pre-drawing, reduce repeated drawing of Canvs content, and avoid using floating point coordinates to improve the performance of HTML5 Canvas. Interested friends can refer to it, hoping it will be helpful to everyone.

Many times, we draw and update on Canvas, and we always keep some unchanged content for these contents.

The cache should be pre-drawn, not every refresh.

The code is drawn directly as follows:

context.font="24px Arial";

context.fillStyle="blue";

context.fillText("Please press <Esc> to exit game",5,50);

requestAnimationFrame(render);

Using cache pre-painting techniques:

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 Canvas cache drawing technology, remember to cache Canvas object size less than the actual Canvas size. Try to put the operations of drawing straight lines together, and try to draw them at once. A bad 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 higher performance after modification 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 of unnecessary Canvas drawing states. An example of frequently switching drawing style 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);

}

Avoid frequent switching of drawing states, and the better performance drawing 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);

}

When drawing, only draw the areas that need to be updated, and avoid unnecessary duplicate drawing and extra overhead at any time. For complex scene drawing, hierarchical drawing technology is used, which is divided into foreground and background drawing. Define the Canvas layer

The HTML is as follows:

<canvas>

</canvas>

<canvas>

<SPAN></canvas>

</SPAN>

If not necessary, try to avoid drawing effects such as shadows, blurs, etc.

Avoid using floating point coordinates

When drawing a graph, integers should be selected instead of floating-point numbers. The reason is that Canvas supports half-pixel drawing to implement an interpolation algorithm based on decimal places to achieve anti-aliasing effect of drawing images. If it is not necessary, please do not select floating-point values.

Clear the drawing content on Canvas:

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

But in fact, there is also a hack-like method in Canvas:

canvas.width = canvas.width;

It can also achieve the effect of clearing content on canvas, but it may not be supported on some browsers.