Talk about Canvas rendering related (non-API layer, partial frame design)

1. rendering mechanism
2. Rendering performance analysis
3. Not instant rendering ( instant rendering )
4. Fragmented rendering
5. Split canvas primitives for split rendering

---

rendering mechanism

• Canvas drawing mechanism: The entire canvas is a drawing board, and various graphics are drawn on it. Once the drawing error needs to be corrected, it needs to be redrawn.

    ...
    ctx.fillRect(0,0,10,10);
    ctx.clearRect(100, 100, 100, 100);
    ctx.fillRect(0,0,100,100);

Rendering performance analysis

Note about graphics computations, such as complex graphics derivation, which are not included in the rendering performance analysis.

The rendering performance mainly analyzes the following points:

• number of render primitives (frustum contents [current viewport contents])
• The frequency of rendering primitives (such as interactive analysis, which requires real-time refresh)

Corresponding optimization methods

• Controls the viewable area data.
• Reduce the refresh frequency or slice the operation behavior.
• Instant rendering and asynchronous rendering.
• Fragmentation / off-screen rendering / global rendering local rendering.
• ...

non-immediate rendering

Immediate rendering means that the callback is executed as soon as the user interaction is triggered. For example the following scenario:

A user-controlled entity color triggered N times within 16ms. We have two solutions:

1. The operation of draw() is performed every time it is triggered. Redrawing requires N times to draw.
2. The draw() operation is executed every 16ms to draw the final rendered result.

Fragmented rendering

rendering essentially shards a list, splitting one render into multiple renders. Reduce the number of drawing primitives, which can improve the frame rate.

From the above figure, we can see that fragmented rendering will lead to a longer overall rendering time, so this solution is not a performance optimization solution for rendering, but an optimization solution to improve frame rate and response effect.

Sub-canvas split primitive rendering (also considered fragmentation)

Imagine that there are a lot of primitives in a scene canvas. The primitives are divided into many categories, such as text, basic geometric figures... and the update frequency of a lot of text content is very low and hardly updated. How can the design be reasonable?
I provide an idea. I will use two canvases to draw these two parts, text and shape respectively. In turn, the updated content is reduced and the frame rate is increased (as shown in the figure below).

finally

Visualization related architecture design, source code learning, daily development. I will share in depth step by step. If it helps you, please follow my follow-up content. Students in need can add my contact information (on my homepage, pull you into the group chat).