MS paint clone-如何存储形状

我一直在尝试用javascript创建MS paint克隆。在我开始考虑填充桶工具之前，一切似乎都很完美。我使用processing.js库，基本上我使用内置的形状（椭圆、矩形和直线）来绘制。我所做的是将用户绘制的每个形状的“类型”存储在一个数组中，并相应地进行渲染。如果形状i=1，那么它是一条线，形状i=2，它是一个椭圆，依此类推。我这样做是为了按顺序渲染形状。即最后绘制的形状是在所有其他形状之上绘制的。

---

显然，这种方法不允许我使用填充桶工具（可能是因为我不知道怎么做）。我做了一些研究，发现我将不得不使用洪水填充算法。该算法需要使用大量队列、堆栈、节点等。在我深入研究并考虑实际实现它之前，我想知道我是否必须放弃我在这里提出的“存储在阵列中”的概念。我如何准确地将像素表示为“节点”？因为根据维基百科关于洪水泛滥的条目，我会用“节点”来做很多事情。有什么想法/资源吗？

已解决。不需要重组。我不必使用节点或任何东西。我所要做的就是将相同颜色的像素推到一个堆栈中。我在这里找到了我想要的东西：