4

I'm using Fabric.js to create a simple paint app. One of the features that I'm having problems implementing is the Bucket Tool.

Objects can be filled with color using Fabric.js with canvas.item(0).fill = "red" However I want to be able fill the intersection[C] of two objects[A,B].

Example

Does anybody knows how to achieve this? I've been looking for examples and tutorials about how to implement this and many point to the 'Flood Fill' but I dont think it can be implemented with Fabric.js

Any help would be kindly appreciated!

kangax
  • 38,898
  • 13
  • 99
  • 135
Gary Torres
  • 520
  • 7
  • 18

1 Answers1

2

When you can get a pixelated raster object of the whole canvas it should be possible to implement flood fill. But if you want to stay in the vector world you need boolean operations to get all the intersecting shapes of all the shapes your bucket is hovering over. Afterwards you can just set the background color of that intersection surface.

I am not a fabricjs expert so I have no idea if it supports either of these. For javascript drawing libraries that have boolean opearations check out this question.

Community
  • 1
  • 1
Christoph
  • 1,310
  • 16
  • 28
  • Thanks @Christoph. You pointed me to the right direction. I implemented a canvas that holds the raster of the vectors created with FabricJS, then ran a Flood Fill on it then placed the newly colored pixels as an image back to the FabricJS canvas as there is no way to do a boolean operation with two or more objects in FabricJS (at least not that I'm aware of) – Gary Torres Mar 10 '14 at 20:17