With Paperjs API, how to do flood-filling over a background raster image?

[meta_leap (Phil)]

Bit of a rare hobbyist usecase here.. Using React and SVGs (no paper.js yet) I built this proto app shown below. On the right a color selector operated via keyboard. Center is one big SVG that contains a full-canvas-filling background raster image (all the black line art and black fills) and 4 groups denoting the 4 comic panels. Each of the groups in this example has some manually-placed fills I did in Inkscape, but the idea is to make my own tool for this, via some vector-graphics API such as paper.js.



So in paperJS terms, I guess I want to initially "import SVG" on page load, display the canvas, induce the vector graphics operations "flood-fill against raster-provided line-art outlines" and later simply "brush of thickness B" to be performed with mouse operations, then to save the results export from paperJS' live canvas to SVG.

Nevermind the load/save import/export plumbing for now, I'm most interested in how easily the API might support the flood-fill algo against the backing raster line-art's outlines, how would you vector-graphics veterans tackle such a use-case? (Inkscape can do it but for ergonomics and flow reasons I'm building my own UX for this single-purpose job since all general-purpose graphics programs make it too cumbersome, although otherwise great programs.)

[shishir raven]

Once you've imported the SVG, you'll typically encounter a mix of closed paths and open paths.

For Closed Paths (Flood-Fill):

• You can build a Paper.js tool that lets you click on an object to select it and change its fill color.

• Optionally, you might show a hover-based fill color preview to enhance the UI/UX.

For Open Paths:

• Since open paths don't define a bounded area, a traditional flood-fill won’t work as expected.

• A better approach would be to implement a brush-based tool in Paper.js, where the user can manually paint within or along the path.

• You can use a separate layer or low-opacity strokes to simulate "filling" where path boundaries are not defined.

When converting raster images to SVG using Inkscape, paths are not always closed by default. In a past project, we established a design rule that all paths must be closed, which greatly simplified the coloring process. It may help to enforce this as a best practice if you're generating SVGs for coloring purposes.

---

I've worked on several interactive SVG tools and Paper.js-based editors. If you need help with this project or want to collaborate, feel free to reach out.

📧 shishi...@gmail.com
🌐 iamshishir.com

Best,
Shishir Raven