Multiple Canvas Eraser Problem

[NajmusSakibRashid]

Describe the bug The bug is observed when there is multiple canvases in a page. I can draw independently on the canvases but while erasing on a canvas the same event is happened to all other canvases.

To Reproduce Steps to reproduce the behavior:

1. Add multiple canvas in a page
2. Draw something independently to all the canvases
3. Try to erase in one canvas
4. You will notice all the drawings of other canvases is also erasing.

Expected behavior It is expected that only the image I select to erase will perform the erasing operation.

Screenshots canvas_issue.webm

Desktop (please complete the following information):

• Linux
• Chrome
• Version 128.0.6613.119 (Official Build) (64-bit)

Smartphone (please complete the following information):

• I did not test it for smartphone.

[Douglas-Hsieh]

I found another bug that might be related. When you have multiple canvases that use the backgroundImage prop, the canvases will use the background image of the first canvas.

[Louis116]

would you mind set up a CodeSandBox / CodePen / StackBlitz to reproduce this problem? By any chances you guys are using the same ref of ReactSketchCanvasRef for all canvas instead of one ref per each canvas? I think sharing the same ref have potential of causing these bug. I have tried multiple canvas in same page, but so far not yet encounter both earsier and same background image issue.

[bojie-liu]

If you did not set unique id for each ReactSketchCanvas in one page. The eraser mask will somehow messed up.