如何通过javascript识别画布中的区域

此图像加载到html5画布中

如果用户在正方形内的任何点按，我想用颜色填充该区域。但就在里面，颜色在黑线处停止。您可以考虑使用Windows Paint中的填充工具

我怎样才能解决这个问题？对于这样的函数，是否有javascript库可供使用

---

你要找的东西叫做a。它基本上会以你点击的像素的颜色作为种子。它将检查连接到种子像素的所有像素是否具有相同的种子颜色，并将它们填充到所需的颜色。该算法有两种类型：8方向和4方向。其中，邻居被定义为（S=种子，X=连接）：

4向

----------------
|    |  X |    |
----------------
|  X |  S |  X |
----------------
|    |  X |    |
----------------

----------------
|  X |  X |  X |
----------------
|  X |  S |  X |
----------------
|  X |  X |  X |
----------------

8向

----------------
|    |  X |    |
----------------
|  X |  S |  X |
----------------
|    |  X |    |
----------------

----------------
|  X |  X |  X |
----------------
|  X |  S |  X |
----------------
|  X |  X |  X |
----------------

递归算法如下（来自维基百科）：

---

您可能需要使用

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
ctx.clicked=false；
函数绘图（）{
clearRect（0，0，canvas.width，canvas.height）；
ctx.save（）；
ctx.旋转（45）；
ctx.beginPath（）；
ctx.rect（100，-100100100）；
如果（点击ctx）{
ctx.fillStyle=“蓝色”；
ctx.fill（）
}
ctx.stroke（）；
ctx.restore（）；
}
draw（）；
canvas.addEventListener（'click'，函数（e）{
var bounds=canvas.getBoundingClientRect（）；
var mouseXY=[e.clientX-bounds.left，e.clientY-bounds.top]
ctx.clicked=ctx.isPointInPath（mouseXY[0]，mouseXY[1]）；
draw（）；
});
画布{
边框：1px实心
}