Erase/rubber Tool

[Ismael Gómez]

hi, how i can do a erase/rubber tool?, not only delete path, i want to do a rubber  tool like photoshop, it's possible? thanks for any help for all.

i don't know how begin. thanks

[asensi...@gmail.com]

Hi,

you can play with blend modes, and especially destination-out which can be usefull in your case. Here is a simple sketch demonstrating the idea.

let path;

function onMouseDrag(event) {

    if (!path) {

        path = new Path({

            strokeColor: 'black',

            strokeWidth: 20,

            blendMode: event.modifiers.shift ? 'destination-out' : 'normal'

        });

    }

    path.add(event.point);

}

function onMouseUp() {

    path = null;

}

[Ismael Gómez]

Thanks for your fast reply.

[Ismael Gómez]

when I use destination-out , blendmode of the path, when export the canvas to svg document the path in blendmode destination-out  show in color of the strokeColor, not erase the original path, i would say when export the canvas in a document svg, the path in blendmode shows as a normal blendmode.

I use this  exportSVG([options]) asstring = true, can i help me?

i can see this style="mix-blend-mode: destination-out"/> inside of document svg

but when i load the document in edge browser or chrome browser i see the destination-out blendmode paths in normal blendmode

can you  send me a sample lo load the document svg with importSVG whith this importSVG(svg[, options])

thanks another time...

[Ismael Gómez]

hi can you help me? thanks

[Ismael Gómez]

Finally, i use this

https://gist.github.com/beardicus/8cbe9511d43e3fb58d76e336f76f4eb2

and works more or less, thanks