Is there a way to set opacity to 0 in a canvas instead of drawing with a color?-CodePudding

I have the following function:

function draw(event) {
        context.beginPath();
        context.lineWidth = 20;
        context.lineCap = 'round';
        context.strokeStyle = 'rgb(255, 255, 255)';
        context.moveTo(coord.x, coord.y);
        reposition(event);
        context.lineTo(coord.x, coord.y);
        context.stroke();
    }

And I would like to know if it's possible to, instead of having a color in the strokeStyle, to just reduce the opacity to 0 so that I am essentially "erasing" the canvas element and show the element that is behind it.

I am sorry if this has been asked before, I couldn't find any answer to this anywhere.

CodePudding user response：

To do this, you need to set the globalCompositeOperation to an operation type that removes the existing colors when something is drawn to the canvas. I've made a fiddle that demonstrates this: https://jsfiddle.net/twc1xern/

It has two canvases, one in front of the other. The front canvas is filled with red and the back canvas is set to blue. When the operation is set:

foreground.globalCompositeOperation = 'destination-out'

Drawing a line removes the color data from the foreground canvas, showing the blue canvas underneath.