EraserBrush created a Blurred Path on scaled Custom Path Object

[phoenisx]

Version

Custom Build with EraserBrush, 4.6.0

Test Case

https://codesandbox.io/s/fabricjs-eraser-scale-issue-u077l?file=/src/Star.js

Information about environment

Codesandbox reproduction.

Steps to reproduce

Create a Path or loadSVG, and scale the Object.
Erase the object with EraserBrush.

Expected Behavior

• Should Erase and keep the erased path with scaled density and not get blurred.

Actual Behavior

• Eraser erases the Object, but on mouse:up, the erased portion gets blurred.

[phoenisx]

Hi, I am willing to contribute and fix this issue (If it is an issue!!), due to some time constraints I have.

Can someone guide me on where to look into EraserBrush, and what might be causing this issue, so that I can raise a fix.

Let me know, if I can be of any help here.

[phoenisx]

The same happens with a highly scaled image as well!!

I confirmed by scaling the Background image 10x, in the example http://fabricjs.com/erasing, and erasing the background, made the clip-path blurry.

[phoenisx]

Okay!!

Scaling doesn't work properly with clipPaths I guess, not sure why because scaling a shape doesn't blur the object, but scaling a clipPath inside a shape blurs it.

Anyways, as of now, I fixed this issue by modifying the path, width, height, pathOffset, left, and top properties of the Object, on each update.

const getNewPath = (scaleX, scaleY) => {
  const path = (this.originalStar.path || []);
  return path.map((cmd) => {
    return [cmd[0], cmd[1] * scaleX, cmd[2] * scaleY];
  });
};

const newWidth = scaleX * size;
const newHeight = scaleY * size;

activeObj.set({
  // scaleX: Math.abs(this.startX - pointer.x) / 22,
  // scaleY: Math.abs(this.startY - pointer.y) / 22,
  path: this.getNewPath(scaleX, scaleY),
  width: newWidth,
  height: newHeight,
  pathOffset: {
    x: scaleX * this.originalStar.pathOffset.x,
    y: scaleY * this.originalStar.pathOffset.y,
  }
});

This works, but not sure if this can be considered as a solution, because scaling (as per my knowledge) is much faster compared to modifying the actual points in the Path. Correct me if I am wrong here!!

[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.

[ShaMan123]

Hi @phoenisx,
I developed the eraser brush and I understand what you are experiencing.
As you mentioned it is related to clip paths and not to erasing logic as far as I can tell.
It seems to be the result of a downsized cache canvas or something of the sorts.
Look into #7186 and perhaps suggest your fix (I believe you are right - scaling is extremely fast because of caching; changing the path results in cache invalidation and a complete redraw).

[phoenisx]

Thanks, @ShaMan123

Closing this, as it's being tracked here: #7186

[ShaMan123]

I saw something that might help #7300