Detecting when the eraser brush has completely erased

[aurpo1]

Hi!
I'm using the eraser brush, for free drawing sketch app.

I drew an object and erased it using an eraser brush(http://fabricjs.com/erasing).
I expected the object to completely disappear, but the object still remains. (selected box remains)

I want to detect when an object has been completely erased from the eraser brush.
The way I think it was to use 'getContext', 'getImageData' to compare pixel by pixel, but this would take too long.

Is there another way?

Thank you.

[ShaMan123]

I don't think so
There are several duplicates of this.
I suggest you run the check in a web worker after you transfer the canvas or image data to it
Then you can send back the answer and remove the object if needed

[aurpo1]

I'm going to run my app somewhere other than the web. The performance is poor on my work space.😥 I tested it -> getImageData takes a lot of time.

So What I'm curious about is whether fabric js provides any methods for what I want. (Detect completely erase)
If there is, I would appreciate some guidance. If not, I will find another way.

[aurpo1]

Is this the issue you mentioned? #8586

[ShaMan123]

Yes and there is another one at least
Which platform?
Please share your findings

[aurpo1]

for LG TV webos platform. I guess hardware performance is the reason.
#6994 (comment) < Is another one?

[ShaMan123]

Yes
You could always do the work in the backend and remove the object async

[ShaMan123]

I have this weird idea that might well be a dead end
Try the following algorithm using bezier-js

1. Define outline to be the object described by paths suited for intersection tests/bezier-js

2. Define the eraser path as an array of C paths (Bezier class of bezier-js)

3. Loop through the C paths and do the following:

   • test each path against the outline for intersection/being contained
   • in case of intersection, cut the outline using the intersected path as the knife, taking into account stroke width
   • in case of being contained, continue
   • else, continue (will retest on smaller outlines as part of the algorithm if contained in outline)
   • repeat until no more intersections
   • if remained outlines that are not contained, the object is not fully erased

[aurpo1]

Thank you for your consideration! I will try it.

[BalachanderM]

Did you got any solution for this? even I face the same problem :-(

[mhieupham1]

@BalachanderM In my case, i using fabricjs version 4.6.0 and have override _finalizeAndAddPath function in fabric.EraserBrush
i leave my sample code here: https://jsfiddle.net/mhieupham/4ztLa296/61/

[BalachanderM]

@mhieupham1 Thanks! Will this work in react with typescript

[mhieupham1]

@BalachanderM yes. this will work in React or Nextjs with TS.

[BalachanderM]

@mhieupham1 I have tried using react with typescript but I couldn't figure it out can you give the codefile if it works for you? thanks, a lot

[mhieupham1]

@BalachanderM yes, i have used fabric.js on this repo https://github.com/tbolis/react-sketch, you can use it and add the eraser function, with the eraser code from line 1 to line 760 in https://jsfiddle.net/mhieupham/4ztLa296/61/

[davidanquetin]

Hi,
always looking for a simple way to know if a path is fully erased or not (is there a simple parameter for this ?) when listening to erasing:end event ?
I need to keep erased object on canvas (because of undo system).
I tried some different tests (intersections, etc) but any of this is efficient for now.
Has someone find a simple method ?
I use old EraserBrush with Fabric 5.
thanks