Canvas Optimization Guide

Canvas performance is a very noteworthy problem, and this time, we also encountered some points needing performance optimization when using Canvas: We used Canvas to achieve the effect of background: cover before, but this led to repeated drawing of resize and soaring CPU usage.

Use off-screen rendering

For this kind of scene, the explanation in MDN is “pre-rendering similar graphics or repetitive objects on off-screen canvas”. Of course, in fact, the explanation in MDN is not detailed enough, neither explaining why off-screen Canvas is used nor the meaning of off-screen Canvas:

We can understand the off-screen Canvas as a pre-rendering mechanism. By first drawing the whole pattern, we do not need to perform repeated image rendering in local areas, and can directly cut the image in the drawImage.

Processing before:

    

     
function render() {
     
draw(context); // The code is omitted
     
}
    

Added off-screen rendering:

    

     
// Render off-screen
     
var m_canvas = document.createElement('canvas');
     
m_canvas.width = 64; // Render the whole
     
m_canvas.height = 64;
     
Var m_context = m_canvas. GetContext (" 2 d ");
     
draw(m_context);
     

     
function render() {
     
  context.drawImage(m_canvas, 0, 0);
     
}
    

For some post-listen rendering, creating an Image and then rendering will consume a lot of CPU. If off-screen rendering is used, the CPU usage in high-frequency events (my own is window.resize) is reduced by as much as twice.

Concentrated draw

Drawing operations can consume a lot of resources, so it is best to draw all the commands at once and store them in a buffer.

Before optimization:

    

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

After the optimization:

    

     
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 floating point coordinates

Browsers do extra work on floating point numbers to prevent aliasing. They can be rounded by a math-class function:

    

     
CTX. DrawImage (myimage.png, Math. Floor (0.3), and Math. The floor (0.5));
    

Use multiple canvases to render complex scenes

For some complex scenes, it is possible to distinguish between invariant scenes and changing objects. Here is a demo, which requires smaller pixels to change and render:

    

     
<div id="stage">
     
  <canvas id="ui-layer" width="480" height="320"></canvas>
     
  <canvas id="game-layer" width="480" height="320"></canvas>
     
  <canvas id="background-layer" width="480" height="320"></canvas>
     
</div>
     

     
<style>
     
  #stage {
     
    width: 480px;
     
    height: 320px;
     
    position: relative;
     
    border: 2px solid black
     
  }
     
  canvas { position: absolute; }
     
  #ui-layer { z-index: 3 }
     
  #game-layer { z-index: 2 }
     
  #background-layer { z-index: 1 }
     
</style>
    

Further reading

1. The optimization of canvas
2. Canvas performance optimization – Masami Seto’s blog
3. Improve HTML5 Canvas performance – HTML5Rocks