如何合并两个canvas为单个画布用于WebRTC流并解决计数重叠问题

出现内容重叠的根本原因是你没有在每次更新合并画布前清空上一帧的绘制内容，你注释了下半部分的清空逻辑，且没有清空整个合并画布，导致多次绘制的计数文本堆叠在一起。

修正后的代码如下：

const ctx = canvas1.getContext("2d"); // 尺寸600*500像素
const ctx2 = canvas2.getContext("2d"); // 尺寸600*100像素
const contex = canvas.getContext("2d"); // 最终合并画布 尺寸600*600像素

// 每次重绘前先清空整个合并画布，避免上一帧残留
contex.clearRect(0, 0, canvas.width, canvas.height);
contex.drawImage(canvas1, 0, 0); // 绘制上方主内容画布
contex.drawImage(canvas2, 0, 500); // 绘制下方计数画布

额外注意事项：

• 如果canvas2本身的计数文本就存在重叠，还要检查你在canvas2上绘制计数内容前，有没有先清空canvas2自身的画布：

  // 绘制canvas2计数前先清空自身画布
  ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
  ctx2.fillText(当前计数值, x坐标, y坐标); // 你的原有计数绘制逻辑
  

• 如果你需要保留canvas1的内容不需要每次重绘，也可以只清空合并画布的下半部分区域，取消你注释的contex.clearRect(0, 500, 600, 100);即可。

内容的提问来源于stack exchange，提问作者LELOUCH