Javascript 向碰撞画布矩形添加外部笔划

我在画布中添加了多个可能相互碰撞的矩形。外部笔划应显示在两个矩形的外部，或者矩形形状应合并为一个，以产生预期的结果

见下图

它必须被剪切，因为它将在画布下显示内容。请参见带有背景图像的实时示例：

在代码示例中，如图的第一个示例所示，下面的矩形被添加到彼此的顶部

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var offsetX = 150;
var offsetY = 150;
var w = 200;
var h = 100;

ctx.fillStyle = "red";
ctx.rect(0, 0, 600, 600);
ctx.fill();

ctx.clearRect(offsetX,offsetY, w, h);
ctx.strokeRect(offsetX, offsetY, w, h);

ctx.clearRect(offsetX-50,offsetY+50, w, h);
ctx.strokeRect(offsetX-50, offsetY+50, w, h);

由于矩形的碰撞可能是无意的和多样的，有没有办法在不编写每条路径的复杂计算的情况下实现它

编辑：

---

我试图实现的是类似于youtube反馈表单的功能，在编辑屏幕截图时，可以突出显示项目，然后合并边框

只需再添加一个

clearRect（）

（第一个）

---

您可以跳过清除第一个矩形，然后在划过第二个矩形后清除它

clearprov

功能将清除初始矩形笔划内的区域

let canvas=document.getElementById（'canvas'），
ctx=canvas.getContext（'2d'），
offsetX=70，
offsetY=20，
w=200，
h=100，
冲程宽度=5；
ctx.fillStyle='#F00'
ctx.rect（0,060600）；
ctx.fill（）；
ctx.strokeStyle='#0FF'；
ctx.lineWidth=冲程宽度；
//ctx.clearRect（offsetX，offsetY，w，h） 当你想用复杂的形状来清除画布时，忘掉clearRect，它不是唯一一个能够产生透明像素的

相反，请看一看

因此，您的形状实际上是边界线，但我认为您已经可以从中受益：


var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
var offsetX=150；
var offsetY=150；
var w=200；
var h=100；
ctx.lineWidth=2；
ctx.fillStyle=“红色”；
ctx.fillRect（0,060600）；
//将复杂形状声明为单个子路径
ctx.beginPath（）
ctx.rect（offsetX，offsetY，w，h）；
ctx.rect（偏移量X-50，偏移量+50，w，h）；
//现在我们可以画了
//首先是笔划，因为我们要擦除填充区域内的内容
ctx.stroke（）；
//现在要擦除，我们切换到目标输出合成模式
ctx.globalCompositeOperation='destination out'；
//填充内部路径
ctx.fill（）；
//我们结束了
//如果您希望稍后返回正常模式
ctx.globalCompositeOperation='source over'
body{背景：线性渐变（蓝色、黄色）；}
您是否尝试过使用多边形填充？谢谢，但正如我在问题中提到的，我不想计算每条路径，因为矩形可以变化。是的，我知道，我添加了一个简单的解决方案如果你担心保留笔划宽度，我会考虑到。。。
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var offsetX = 150;
var offsetY = 150;
var w = 200;
var h = 100;


ctx.fillStyle = "red";
ctx.rect(0, 0, 600, 600);
ctx.fill();

ctx.clearRect(offsetX,offsetY, w, h);
ctx.strokeRect(offsetX, offsetY, w, h);
ctx.clearRect(offsetX-50,offsetY+50, w, h);
ctx.strokeRect(offsetX-50, offsetY+50, w, h);
ctx.clearRect(offsetX,offsetY, w, h);