Search code examples
html5-canvaserasekonvajsbrushreact-konva

How to remove line, that drawn with brush, without removing image

I have using https://konvajs.org/docs/sandbox/Free_Drawing.html this first example,but also added image in stage. But when I erase drawn line, image also removed. How can I fixe that

Solution

  • The demo is using globalCompositeOperation = destination-out to implement erase function. globalCompositeOperation affects all drawings in a canvas.

    To solve the issue you can use another Konva.Layer at the bottom with your image.

    Each Konva.Layer has its own canvas element. So it will be not affected by shapes with globalCompositeOperation = destination-out in another layer.