Estoy tratando de reaparecer una 'función de selección' de Windows mspaint u otras herramientas de dibujo en el lienzo, que funciona como:

1. cuando el mouse esté presionado, marque este punto
2. cuando el mouse se está moviendo, dibuje un rectángulo desde el punto hacia abajo del mouse hasta la posición actual del mouse
3. cuando el mouse está arriba, conserve el rect en el lienzo y finalice la selección

Ahora estoy confundido acerca de cómo funciona el evento 'mousemove' cuando se mueve el mouse. Cuando el mouse se mueve, dibuja muchos rectángulos en el lienzo.

código como:

 const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); function windowToCanvas(x,y) { let rect = canvas.getBoundingClientRect(); x = x - rect.left * (canvas.width / rect.width); y = y - rect.top * (canvas.height / rect.height); return [x,y]; } let mRect = {x:0,y:0,w:0,h:0}; function handleMouseMove(e){ let temp = windowToCanvas(e.clientX,e.clientY); [mRect.w,mRect.h] = [temp[0]-mRect.x,temp[1]-mRect.y]; ctx.clearRect(0,0,canvas.width,canvas.height); // this line seems not working ctx.rect(mRect.x,mRect.y,mRect.w,mRect.h); ctx.stroke(); } function handleMouseDown(e){ [mRect.x,mRect.y]=windowToCanvas(e.clientX,e.clientY) canvas.addEventListener('mousemove',handleMouseMove); canvas.addEventListener('mouseup',()=>{ console.log('mouseup') canvas.removeEventListener('mousemove',handleMouseMove) },{once:true}); } canvas.addEventListener('mousedown',handleMouseDown);