Node.js Canvas批量生成PNG集合时出现新旧图像重叠问题

你遇到的图层叠加问题由两个代码错误导致：

1. 全局复用同一个Canvas实例：你在代码初始化阶段仅创建了一次canvas和对应的上下文ctx，每生成完一张图片后没有清空画布内容，上一张的绘制结果会一直保留，自然会叠加到下一张图片上
2. 异步逻辑执行顺序错误：原代码的循环中用forEach调用异步的drawLayer方法，没有等待异步绘制完成就进入下一轮逻辑，绘制顺序完全混乱，就算加了清屏代码也不会在正确的时机生效

两个修改点对应解决上面的两个问题：

• 每轮生成新图片前，先调用ctx.clearRect(0, 0, canvas.width, canvas.height)清空整个画布，彻底清除上一张的残留内容
• 把原来的forEach遍历图层改为for...of配合await调用，确保当前图片的所有图层都按顺序绘制完成后，再进入下一张图片的生成流程

for(let i = 1; i <= edition; i++){
    // 生成新图前先清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // 按顺序等待所有图层绘制完成
    for (const layer of layers) await drawLayer(layer, i);
    console.log("Creating edition " + i);
};

补充优化建议：你当前的drawLayer函数里每绘制完一个图层就调用saveLayer存图，会生成很多中间层的半成品图片，如果你只需要最终合成的完整图片，可以把saveLayer调用挪到所有图层绘制完成之后，避免生成冗余文件。

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