Creé una pizarra de lienzo HTML5 que se puede usar para escribir cualquier cosa con el mouse. Traté de agregar la funcionalidad de borrador a la pizarra que borrará píxeles de la pantalla, pero no funciona. Estoy compartiendo las partes relevantes del código.

 function drawOnCanvas() { var canvas = document.querySelector('#board'); this.ctx = canvas.getContext('2d'); var ctx = this.ctx; var sketch = document.querySelector('#sketch'); var sketch_style = getComputedStyle(sketch); canvas.width = parseInt(sketch_style.getPropertyValue('width')); canvas.height = parseInt(sketch_style.getPropertyValue('height')); var mouse = {x: 0, y: 0}; var last_mouse = {x: 0, y: 0}; /* Mouse Capturing Work */ canvas.addEventListener('mousemove', function(e) { last_mouse.x = mouse.x; last_mouse.y = mouse.y; mouse.x = e.pageX - this.offsetLeft; mouse.y = e.pageY - this.offsetTop; }, false); /* Drawing on Paint App */ ctx.lineWidth = (writeMode===1)?5:8; ctx.lineJoin = 'round'; ctx.lineCap = 'round'; ctx.strokeStyle = 'blue'; setTimeout(()=>{ ctx.strokeStyle = (writeMode===1)?'blue':'white'; //choose pen or eraser (pen is 1 and eraser is 0) },100) canvas.addEventListener('mousedown', function(e) { canvas.addEventListener('mousemove', onPaint, false); }, false); canvas.addEventListener('mouseup', function() { canvas.removeEventListener('mousemove', onPaint, false); }, false); var root = this; var onPaint = function() { ctx.beginPath(); ctx.moveTo(last_mouse.x, last_mouse.y); ctx.lineTo(mouse.x, mouse.y); ctx.closePath(); ctx.stroke(); };

}

Ayúdenme a agregar la función de borrador en el código existente