html canvas Stroke() 在鼠标移动事件上多次重绘形状

Question

当我四处移动鼠标时，我的 html 画布会在前一个形状内重复绘制相同的形状，并导致形状在其前一个形状内聚集。但是要绘制出1个形状轮廓。我已经尝试了很多我知道的解决方案，但没有用。

代码看起来很长，但我只需要这个形状在鼠标移动时有一个轮廓。所有三种形状“矩形、三角形、圆形”都会发生此错误。 var selectedTool = useRef('brush') 用于设置画什么（线，形状） var pressedMouse = useRef(false) 用于设置鼠标事件。

drawRect 是方法，如果 selectedTool = 'rectangle' 并且同样适用于它们中的每一个。

var colorLine = useRef('black')
var thick = useRef(1)
 
var selectedTool = useRef('brush')
var pressedMouse = useRef(false); 

useEffect(() => {

    var square = document.getElementById("drawPlace");
    square.height = window.innerHeight - 55;
    square.width = window.innerWidth - 65;
    var paper = square.getContext("2d");
    
    var x;
    var y;
    var snapshot;
    
    
    var key = {C: 67};


    const drawRect = (e, board) => {
        //if fillColor isn't checked draw a rect with border else draw rect with background
       /*if(!fillColor.checked) {
           // creating circle according to the mouse pointer
           return paper.strokeRect(e.offsetX, e.offsetY, prevMouseX - e.offsetX, prevMouseY - e.offsetY);
       }*/

       board.strokeRect(e.offsetX, e.offsetY, x-e.offsetX, y-e.offsetY)
   }

    const drawCircle = (e) => {
        paper.beginPath(); // creating new path to draw circle
        // getting radius for circle according to the mouse pointer
        let radius = Math.sqrt(Math.pow((x - e.offsetX), 2) + Math.pow((y - e.offsetY), 2));
        paper.arc(x, y, radius, 0, 2 * Math.PI); // creating circle according to the mouse pointer
        //fillColor.checked ? paper.fill() : paper.stroke(); // if fillColor is checked fill circle else draw border circle
        paper.stroke();
    }
    
    const drawTriangle = (e) => {
        paper.beginPath(); // creating new path to draw circle
        paper.moveTo(x, y); // moving triangle to the mouse pointer
        paper.lineTo(e.offsetX, e.offsetY); // creating first line according to the mouse pointer
        paper.lineTo(x * 2 - e.offsetX, e.offsetY); // creating bottom line of triangle
        paper.closePath(); // closing path of a triangle so the third line draw automatically
       // fillColor.checked ? paper.fill() : paper.stroke(); // if fillColor is checked fill triangle else draw border
       paper.stroke();
    }

    document.addEventListener("mousedown", startDrawing);
    document.addEventListener("mousemove", drawLine);
    document.addEventListener("mouseup", stopDrawing);
    document.addEventListener("keydown", clearCanvas);

    function startDrawing(eventvs01){
        pressedMouse.current = true;;
        x = eventvs01.offsetX;
        y = eventvs01.offsetY;
        paper.beginPath();
        //snapshot = paper.getImageData(0, 0, square.width, square.height);
    }

    function drawLine(eventvs02) {
        if (pressedMouse.current) {
            document.getElementById("drawPlace").style.cursor = `url(${dot})`;

            
            if(selectedTool.current === "brush") {
                // if selected tool is eraser then set strokeStyle to white 
                // to paint white color on to the existing canvas content else set the stroke color to selected color
                var xM = eventvs02.offsetX;
                var yM = eventvs02.offsetY;
                drawing_line(colorLine.current, x, y, xM, yM, paper);
                x = xM;
                y = yM;

            }else if(selectedTool.current === "rectangle"){
                drawRect(eventvs02, paper);
            }else if(selectedTool.current === "circle"){
                drawCircle(eventvs02);
                
            }else {
                drawTriangle(eventvs02);
                
            }

        }
    }

    function stopDrawing(eventvs03) {
        pressedMouse.current = false;
        document.getElementById("drawPlace").style.cursor = "default";
    }

    function clearCanvas(whenPressKey) {
        if (whenPressKey.keyCode === key.C) {
            paper.clearRect(0, 0, square.width, square.height);
        }
    }

    function drawing_line(color, x_start, y_start, x_end, y_end, board){
        board.beginPath();
        board.strokeStyle = color;
        board.lineWidth = thick.current;
        board.moveTo(x_start,y_start);
        board.lineTo(x_end,y_end);
        board.stroke(); 
        board.closePath();
    }

    let handleCol = e => {
        [...[...document.querySelectorAll('.writing-set')][0].children].map((item, index ) => {

            if(index !== 6){

            
                item.addEventListener('click', (e) => {
                    console.log(e.currentTarget.dataset.col)

                    let color = e.currentTarget.dataset.col;
                    colorLine.current=color;
                })
            }else{
                item.addEventListener('change', (e) => {
                    thick.current = e.target.value;
                })
                
            }
        })
        //
    }

    let handleShapes = e => {
        [...[...document.querySelectorAll('.writing-set')][2].children].map((item, index ) => {

            if(index !== 6){
                item.addEventListener('click', (e) => {
                    selectedTool.current = e.currentTarget.dataset.shape;
                    
                })
            }
        })
    }

    handleShapes();
    handleCol();

}, [colorLine])