Canvas custom drawing order to solve the occlusion problem

1. Problem scenario

When using canvas drawing to overlay elements, it often happens that the overlay display is not performed in the order that the one drawn first is at the bottom, and the one drawn later is at the top. The reason is that the time to draw or load is different due to the different sizes of the pictures. The ones that are loaded first are drawn first, and the ones that are loaded are drawn later.

• Suppose now you want to draw the following four elements in the same area of ​​the canvas at the same time:

1. Rectangular grid (600 x 600)

2. The red picture (400 × 400)

3. The green picture (200 × 200)

4. The blue lines

are drawn in sequence, but the final drawing effect is shown in the figure below, and the green figure and the blue line that you want to draw The lines are partially shaded by red, i.e. they are drawn not in the desired order. Among them, the grid part is blocked because the grid is drawn first when drawing, so it will also be partially blocked.

So, how to solve the order problem when drawing, so that the picture is not blocked and drawn in the order you want?

2. Solutions

Now that the above problems have occurred, it must be that the function of drawing blue lines and green graphics is executed first, and finally the function of drawing the red part is executed on the canvas, resulting in occlusion.

• So is it possible to control the execution order of functions?

So I thought of defining an array, and pushing all the functions and methods to be executed into the array, that is, storing the functions as elements of the array in the array, so that these functions can be operated through the method of the array, and then the functions can be customized according to Sort in the order that needs to be executed first, put the ones executed later, and finally traverse the function array and execute each function in it.

3. Implement the code

• 1. Customize the drawing order.

const DrawIndex = {
    
    
  red: 1,
  green: 2,
  mesh: 3,
  line: 4,
};

Note: The third drawing of the grid here is to prevent the grid from being occluded.

• 2. Define the drawList array to save all the functions that need to be drawn

const drawList = [];

• 3. Add the function to be drawn, the corresponding parameter list and the order to be drawn to the array

//1.添加绘制网格函数
drawList.push({
    
    
  func: this.drawMesh,	//绘制网格函数
  value: [width, height],	//绘制需要的参数列表
  index: DrawIndex.mesh,	//绘制顺序
});

//2.添加绘制红色部分函数
drawList.push({
    
    
  func: this.drawRed,	
  value: [width, height, color],	
  index: DrawIndex.red,		//绘制顺序
});

//3.添加绘制绿色部分函数
drawList.push({
    
    
  func: this.drawGreen,	
  value: [width, height, color],	
  index: DrawIndex.green,	//绘制顺序
});

//4.添加绘制蓝色线条函数
drawList.push({
    
    
  func: this.drawLine,	
  value: [lineWidth, lineColor],	
  index: DrawIndex.line,	//绘制顺序
});

• 4. Sort the array

drawList.sort((a, b) => a.index - b.index);

• 5. Traverse the function array and execute the functions in it

drawList.forEach((draw) => {
    
    
  draw.func.apply(this, draw.value);
});

final effect