Javascript 创建绘图应用程序，但它不是'；不要画一条完整的线

我正在创建一个绘图应用程序，但它不起作用，它只是做了一些事情，而不是一条完整的线。请帮我解决这个问题

    let prevX = 0,
    currX = 0,
    prevY = 0,
    currY = 0,
    painting = false,
    dot = false;

window.addEventListener("load", function() {

    let cvs = document.querySelector(".area");
    let ctx = cvs.getContext("2d");

    cvs.addEventListener("mousedown", function(){
        painting = true;
        dot = true;
    });

    cvs.addEventListener("mouseup", function(){
        painting = false;
        ctx.beginPath();
    });

function draw(){

    ctx.beginPath();
    ctx.moveTo(prevX, prevY);
    ctx.lineTo(currX, currY);
    ctx.strokeStyle = "red";
    ctx.lineWidth = "2";
    ctx.stroke();
    ctx.closePath();
}

    cvs.addEventListener("mousemove", function(e){

       if (dot) {
            ctx.beginPath();
            ctx.fillStyle = "red";
            ctx.fillRect(currX, currY, 2, 2);
            ctx.closePath();
            dot = false;
        }

        if(painting) {
            prevX = e.clientX;
            prevY = e.clientY;
            currX = e.clientX - cvs.offsetLeft;
            currY = e.clientY - cvs.offsetTop;
            draw();
        }
    });
})