I've been trying to create an MS paint clone in javascript. Everything seemed perfect until I gave some thought about the fill bucket tool. I was using processing.js library and basically I was using the built in shapes (ellipse, rectangle and line) to draw. What i did was store the 'type' of each shape the user draws in an array and render them accordingly. So if shape[i]==1, then its a line, shape[i]=2, its an ellipse and so on. I did this so that the shapes would be rendered in order. That is the last drawn shape is drawn on top of all other shapes.
And apparently, this method will not let me have a fill bucket tool (probably cos i don't see how to do it). I did a little research and found that I will have to use a flood fill algorithm. And the algorithm involves using a lot of queues and stacks and nodes and such stuff. And before I dive in deeper and think about actually implementing it, I want to know if I will have to do away with the 'store in an array' concept i did here. And how exactly can I represent pixels as 'nodes'? Because according to the wikipedia entry on flood fill, I'd be using 'nodes' to do so much stuff. Any ideas/resources?
