feat(EraserBrush): V2

[ShaMan123]

UPDATE
The eraser has moved https://github.com/ShaMan123/erase2d

Motivation

Solves eraser problem (opaic objects) by applying a mask over the brush.
As a side effect solved other problems such as deep clipping and erasing.
And enabled the awesome feature of undoing erasing.
While boosting performance so it seems.

Previous Drawing Logic

Render objects in 3 steps:

1. All non-erasables on bottom on main/bottom context
2. All erasables on top context
3. While erasing use the path to clip step 2.
4. Non-erasable overlay

This was great except when you had a non erasable opaic object. It would draw on step 1 and 2, doubling itself.
Trying to solve it in context would not work, somewhere it would still be doubled or missing.

Current Drawing Logic

While erasing:

1. clip main context with path
2. render path with a mask on top context. Mask is produced by rendering all non-erasable objects.

This approach supports inverted erasing, AKA recovering, out of the box. We simply produce a mask rendered with all erasable objects with their eraser (clip path) inverted.
Use this feature as follows:

brush.inverted = true;

Outcome

1. Better performance
2. EraserBrush doubles the opacity of semi-transparent non-erasable shapes during free drawing #7445 is solved
3. animations while erasing - if object is erasable it produces a funny output (dev should handle it making the animated objects non-erasable: once feat(animation): animations registry #7528 is merged the brush can handle this case as well by default)
4. Supports/solves eraser and recover brush for fabricjs( canvas) #5187 feat(EraserBrush): inverted brush #7271

Try it out

https://codesandbox.io/s/2hhyp
https://codesandbox.io/s/soz8h (tests erasing with inverted and nested clip paths - erase and select objects to see)
The left top circle is opaic and not erasable.

Migration from V1

The Eraser object is now a subclass of Group. This means that loading from JSON will break between versions.
Use this code to transform your json payload to the new version.

Perf

Next

I've pushed the use of clipping beyond the limit of svg. It seems fabric has advanced further than svg in clipping abilities so toSVG should be amended to using masks, not clip paths in order to support all functionalities.

[ShaMan123]

I want a way to check performance compared to prev version.
Need ideas

[asturur]

You can use the inspector of google chrome.
It will give you scripting time and FPS on the canvas.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[GavinLi2016]

ShaMan123, i found after erased an image. this image can not use clipPath to clip any polygon again.
can you take a see if it is my mistake. thanks
https://codepen.io/gavinli2016/project/editor/AnrdOk

[ShaMan123]

What about changelog?

[ShaMan123]

CHANGELOG committed

[asturur]

Can you fix the dist folder? i tried but i can't fixing it by check out

[ShaMan123]

[asturur]

try from commandline with the classic git checkout master dist ?

[ShaMan123]

DONE!

[asturur]

do we need to merge the second one now?

[ShaMan123]

yes.
it's supposed to have no diff because I merged it into this one.

[ShaMan123]

Well no. I'll shut it down

[komagic]

the case still have edge when using inverted eraser，to implement the feature， only need globalCompositionOperation

[ShaMan123]

@komagic if you've encountered a bug do open a bug report. There's no way to understand what you are experiencing.
And unfortunately setting globalCompositionOperation does not suffice.

[komagic]

https://www.cutout.pro/remove-background/upload

[ShaMan123]

@komagic if you've encountered a bug do open a bug report. There's no way to understand what you are experiencing. And unfortunately setting globalCompositionOperation does not suffice.

my comment still stands.

[ShaMan123]

The eraser has moved https://github.com/ShaMan123/erase2d