I'm trying to implement an eraser functionality in my canvas, I'm able to draw with this function:
canvas = document.createElement("canvas")
context = canvas.getContext("2d")
function reposition(event) {
coords.x = event.clientX - canvas.getBoundingClientRect().left;
coords.y = event.clientY - canvas.getBoundingClientRect().top;
context.arc
}
function draw(event) {
context.beginPath();
context.lineWidth = "30";
context.lineCap = "square";
context.strokeStyle = "#999999"
context.moveTo(coords.x, coords.y);
reposition(event);
context.lineTo(coords.x, coords.y);
context.stroke();
}
Can I alter this in a way where instead of drawing a coloured stroke, it will erase the canvas to make the line drawn transparent?
So the thing that worked here was adding GlobalCompositeOperation = 'destination-out'; to my function
Final function:
function draw(event) {
context.beginPath();
GlobalCompositeOperation = 'destination-out';'
context.lineWidth = "30";
context.lineCap = "square";
context.strokeStyle = "#999999"
context.moveTo(coords.x, coords.y);
reposition(event);
context.lineTo(coords.x, coords.y);
context.stroke();
}```