Free Draw: How to preserve eraser effects when transforming drawn lines?

[muzakon]

I'm building a free-drawing app using this beautiful library and have run into an issue related to erasing and transforming drawn lines.

Behavior:

• Drawing lines uses the source-over globalCompositeOperation.
• Erasing is done by drawing with destination-out, effectively "cutting" parts out of previously drawn lines.
• Each line (drawing or erasing) is a separate Konva.Line.

The erasing works perfectly during drawing — intersected areas are removed as expected.

Problem:

When I select a previously drawn line and apply a Konva.Transformer to it, the eraser strokes (which are separate lines with destination-out) are not included in the transformation. As a result:

• Only the original line gets transformed.
• The erased areas do not move or scale with it.
• This breaks the visual consistency — previously erased areas reappear because the erased section doesn’t follow the transformed object.

Example:

Here’s a demo:
https://codesandbox.io/p/sandbox/ym7m5q?file=%2Fsrc%2FApp.vue%3A128%2C16

Steps to reproduce:

1. Draw multiple intersecting lines.
2. Use the eraser tool (destination-out) to erase overlapping areas.
3. Select a line using a custom selection tool and apply a Konva.Transformer.
4. Move or scale it — you'll notice the eraser marks are not applied to the transformed shape.

---

Has anyone dealt with this before? What’s the recommended approach for managing erasing in a free draw app with transformable objects in Konva?

Thanks in advance!