在javascript画布上的图像中查找不透明填充区域

我有一张带有一些填充圆、矩形等的图像。我想找到填充区域的x1、x2、y1、y2区域

接受的答案很好，但我需要分别找到每个区域。如下图所示，我需要x1、x2、y1、y2的位置。你有什么想法吗

---

以下是一个让您开始学习的大纲：

使用

context.getImageData

从画布获取像素数据

扫描像素数据以查找第一个不透明像素

使用“行进方块”算法查找圆或矩形周围的边界路径点：

迭代路径点并找到[minX，minY]&[maxX，maxY]。这是圆或矩形的边界框

删除步骤#4中计算的边界框区域，以便查找下一个形状

返回步骤#1，直到确定画布上所有不透明形状的边界框

---

4.迭代路径点并找到[minX，minY]&[maxX，maxY]。这是圆或矩形的边界框。如何检测具有此类点的矩形？据我所知，它返回所有不透明点。步骤#3将返回一组围绕第一个不透明形状形成路径的点。因此，找到这组点的最小值和最大值将为您提供该形状的边界框如何清除画布上的矩形？是否有任何方法可以像clear（x1、y1、x2、y2）一样清除画布？形状是否颜色一致且完全不透明？图像部分的颜色将不一致。但所有其他领域都将是完全透明的。