Estoy tratando de implementar una funcionalidad de borrador en mi lienzo, puedo dibujar con esta función:
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(); }¿Puedo modificar esto de manera que, en lugar de dibujar un trazo de color, borre el lienzo para que la línea dibujada sea transparente?
Entonces, lo que funcionó aquí fue agregar GlobalCompositeOperation = 'destination-out'; a mi funcion
última función:
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(); }```