[Bug]: Erased path gets blurry after resize the object

[frankgalindo-briteris]

CheckList

• I agree to follow this project's Code of Conduct
• I have read and followed the Contributing Guide
• I have read and followed the Issue Tracker Guide
• I have searched and referenced existing issues and discussions
• I am filing a BUG report.
• I have managed to reproduce the bug after upgrading to the latest version
• I have created an accurate and minimal reproduction

Version

5.3.0

In What environments are you experiencing the problem?

Firefox, Chrome, Microsoft Edge

Node Version (if applicable)

None

Link To Reproduction

https://codesandbox.io/p/sandbox/fabric-vanillajs-sandbox-forked-k6n7rt

Steps To Reproduce

1. Click on "Erase" button
2. Erase part of the square
3. Click on "Drag" button
4. Select the square and resize it
5. Click on "Erase" button
6. Erase part of the square again

Note: this also happens on the erasing demo (http://fabricjs.com/erasing)

Expected Behavior

The path that was erased should not be blurry

Actual Behavior

The path that was erased became blurry, and if I erase it again the path will also be blurry.

Error Message & Stack Trace

N/A

[ShaMan123]

Hmm...
First eraser needs to migrate to v6 #8499
Then I can look into this
I think it will also need #8298 for context isolation - meaning the problem might be that because eraser clips the object currently caching is used. Caching renders in a different scale than the visible outcome and that might be causing the blur.
Another problem is that the eraser is unaware of the object so it doesn't know that it might be rendering on a cache isOnACache but actually since eraser is clipped by the paths that doesn't matter but adds more complexity to the problem

A solution might be to reverse the rendering order with context isolation. Rendering the eraser paths, using globalCompositeOperation and then rendering the object on top - but that doesn't sound a solution to me with the current state of caching and rendering.

[ShaMan123]

An ugly workaround would be to fiddle with th escaling values and force caching to invalidate properly but i don't think it is feasible

Seems that the eraser should not be part of the cached object canvas but an independant one

[frankgalindo-briteris]

First eraser needs to migrate to v6 #8499

Hi @ShaMan123, thanks for replying ❤️.

I'm not sure if I'm understanding correctly, you mean that this bug will only be fixed in the version 6 and not in the 5.x version ?

[ShaMan123]

Correct

[ShaMan123]

Did you try to remove the paths and applying a scale to them and then adding them back using the eraser method addPathToEraser or something (forgot the name)?

[ShaMan123]

please try this with the new package erase2d and report there for issue

I expect it to be blurry still because of caching but I plan to fix this soon, already tested a solution that remove caching