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

Question

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.

Answer 1

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.