Tips to improve HTML5 Canvas performance

1: Use caching technology to implement pre-drawing and reduce repeated drawing of Canvs content

Many times when we draw and update on Canvas, we always keep some unchanged Content, for which

the cache should be pre-drawn rather than refreshed each time.

The direct drawing code is as follows:

context.font="24px Arial";
context.fillStyle="blue";
context.fillText("Please press <Esc> to exit game",5,50);
requestAnimationFrame(render);

Use cache pre-drawing technology:

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

Use CanvasWhen caching drawing technology, be sure to remember that the cacheCanvas object size should be smaller than the actual Canvas

size. Try to put the operations of drawing straight points together, and try to complete the drawing at one time. 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();
}

Modify the code with higher performance in the future 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 unnecessary Canvasfrequent drawing states Switching, 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. The drawing code with better performance 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 area that needs to be updated, and avoid unnecessary repeated drawing and additional overhead at any time.

For complex scene drawing, layered drawing technology is used, and the foreground and background are drawn separately. The

HTML that defines the Canvas layer 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"></canvas>

If not necessary, try to avoid using drawing special effects, such as shadows, blur, etc.

Avoid using floating point coordinates.

When drawing graphics, the length and coordinates should be selected as integers instead of floating point numbers because Canvas supports half-pixel drawing

The interpolation algorithm will be implemented based on the decimal places to achieve the anti-aliasing effect of the drawn image. Please do not select floating point values ​​if it is not necessary.

##Clear the drawing content on the Canvas:

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

But in fact, there is a similar method in

Canvas hack’s clearing method:

canvas.width = canvas.width;

Also It can achieve the effect of clearing the content

on the canvas, but it may not be supported on some browsers.

The above is the content of techniques to improve the performance of HTML5 Canvas. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!