为何drawImage()会改变目标区域外的Canvas像素？

我在使用Canvas的drawImage()时遇到一个问题：当用destination-atop或copy这类合成模式在特定区域绘制内容时，目标框以外区域的像素Alpha值被强制清零了。具体操作是先把左侧全黄Canvas复制到右侧Canvas，再用destination-atop将中间Canvas绘制到右侧Canvas中心，结果绘制生效的同时，目标区域外的原有内容被清除了。

原因分析 #

这是由合成模式本身的特性决定的：

• copy模式会直接用源图像覆盖目标画布的所有区域，未被源图像覆盖的部分会变为透明
• destination-atop仅在目标图像已有像素的位置绘制源图像，同时会清除源图像未覆盖到的目标区域像素

解决方案 #

如果要保留目标区域外的原有内容，同时在指定区域应用合成效果，需要用**裁剪路径（clip）**限制绘制范围，而非依赖合成模式的区域限制，具体步骤如下：

1. 保存当前画布状态，避免影响后续绘制：

   ctx.save();
   

2. 创建裁剪路径，仅保留需要绘制的目标区域：

   ctx.beginPath();
   ctx.rect(targetX, targetY, targetWidth, targetHeight);
   ctx.clip();
   

3. 设置合成模式并执行drawImage()：

   ctx.globalCompositeOperation = 'destination-atop';
   ctx.drawImage(sourceCanvas, targetX, targetY);
   

4. 恢复画布状态，取消裁剪：

   ctx.restore();
   

完整示例 #

// 右侧画布上下文
const rightCtx = rightCanvas.getContext('2d');
// 中间画布
const middleCanvas = document.getElementById('middle-canvas');
// 目标绘制位置与尺寸
const targetX = 50;
const targetY = 50;
const targetWidth = middleCanvas.width;
const targetHeight = middleCanvas.height;

// 先复制左侧全黄画布到右侧
rightCtx.drawImage(leftCanvas, 0, 0);

// 应用裁剪+合成模式绘制
rightCtx.save();
rightCtx.beginPath();
rightCtx.rect(targetX, targetY, targetWidth, targetHeight);
rightCtx.clip();
rightCtx.globalCompositeOperation = 'destination-atop';
rightCtx.drawImage(middleCanvas, targetX, targetY);
rightCtx.restore();

这样操作后，只有裁剪路径内的区域会应用合成模式绘制，路径外的原有内容会被完整保留，不会出现Alpha值被清零的问题。

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