Canvas技术问题：如何移除两矩形交集且保留背景？

你遇到的问题核心在于 destination-out 是作用于整个画布的——它会把新绘制内容覆盖的所有区域（包括红色背景）都删除为透明，自然不符合你保留红色背景的需求。下面给你两种精准控制操作范围的解决方案：

方法一：用裁剪（Clip）精准锁定交集区域 #

这种方法不需要额外画布，通过裁剪功能把操作范围限制在黄蓝交集内，完全不会影响红色背景：

const ctx = canvas.getContext('2d');

// 1. 绘制红色背景
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);

// 2. 绘制完整的蓝色矩形
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);

// 3. 保存当前画布状态，避免后续操作污染全局设置
ctx.save();

// 4. 设置裁剪区域为黄色矩形的范围——接下来所有操作只在这个区域生效
ctx.beginPath();
ctx.rect(59, 30, 75, 50);
ctx.clip();

// 5. 用destination-out删除裁剪区内的蓝色像素（也就是黄蓝交集部分）
ctx.globalCompositeOperation = "destination-out";
ctx.fillRect(50, 50, 75, 50); // 这里颜色不影响，只要绘制的形状覆盖交集即可

// 6. 恢复画布状态，回到默认的合成模式
ctx.restore();

// 如果需要显示「扣除交集后的黄色矩形」，可以用同样逻辑反向操作：
ctx.save();
ctx.beginPath();
ctx.rect(50, 50, 75, 50);
ctx.clip();
ctx.globalCompositeOperation = "destination-out";
ctx.fillStyle = "yellow";
ctx.fillRect(59, 30, 75, 50);
ctx.restore();
ctx.globalCompositeOperation = "source-over";

方法二：用离屏Canvas预渲染交集遮罩 #

这种方法更直观，先在离屏画布上生成黄蓝交集的精准遮罩，再回到主画布删除对应区域：

const ctx = canvas.getContext('2d');
// 创建离屏画布，尺寸和主画布保持一致
const offscreenCtx = document.createElement('canvas').getContext('2d');
offscreenCtx.canvas.width = ctx.canvas.width;
offscreenCtx.canvas.height = ctx.canvas.height;

// 1. 绘制红色背景
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);

// 2. 绘制完整的蓝色矩形
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);

// 3. 在离屏画布生成黄蓝交集的遮罩
offscreenCtx.fillStyle = "blue";
offscreenCtx.fillRect(50, 50, 75, 50);
// 使用destination-in只保留黄蓝重叠的部分
offscreenCtx.globalCompositeOperation = "destination-in";
offscreenCtx.fillStyle = "yellow";
offscreenCtx.fillRect(59, 30, 75, 50);

// 4. 回到主画布，用遮罩删除交集区域的蓝色像素
ctx.globalCompositeOperation = "destination-out";
ctx.drawImage(offscreenCtx.canvas, 0, 0);

// 5. 处理并绘制「扣除交集后的黄色矩形」
offscreenCtx.clearRect(0, 0, offscreenCtx.canvas.width, offscreenCtx.canvas.height);
offscreenCtx.fillStyle = "yellow";
offscreenCtx.fillRect(59, 30, 75, 50);
offscreenCtx.globalCompositeOperation = "destination-in";
offscreenCtx.fillStyle = "blue";
offscreenCtx.fillRect(50, 50, 75, 50);
offscreenCtx.globalCompositeOperation = "destination-out";
offscreenCtx.fillRect(50, 50, 75, 50);
ctx.globalCompositeOperation = "source-over";
ctx.drawImage(offscreenCtx.canvas, 0, 0);

两种方法的核心思路都是限制 destination-out 的作用范围，只针对黄蓝交集区域操作，彻底避免影响底层的红色背景。

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