HTML画布canvas绘制图形，解决拖影问题

在使用HTMl画面 canvas 绘制矩形，圆等图形时，总是出现拖影。

解决这个问题有很多中方法：

方法一：鼠标移动过程中中不画上去，在释放鼠标的时候绘制上去，这样就看不到拖影，但是看不到绘制过程

方法二：在鼠标移动的时候，清除上一次绘制的矩形，然后在画，这样就没有拖影了，但是计算起来麻烦，要多几行代码

方法三：结合方法一和方法二，做两层画布，重叠显示，上层作为临时画布，下层持久显示，上层在鼠标移动过程中，清空整个画布，不用计算上一次的矩形位置

示例代码（方法三）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 批注画布 -->
    <canvas id="canvas" style="background-color: transparent;border: 1px solid red;position: absolute;top: 100px;left: 100px; z-index: 100;" width="800px" height="600px"></canvas>
    <canvas id="canvas_lasting" style="background-color: transparent;border: 1px solid red;position: absolute;top: 100px;left: 100px;" width="800px" height="600px"></canvas>
    <script>
        var canvas = document.getElementById("canvas");                     // 批注画布-临时
        var ctx = canvas.getContext("2d");

        var canvas_lasting = document.getElementById("canvas_lasting");     // 批注画布
        var ctx_lasting = canvas_lasting.getContext("2d");

        var state = {"press": false}
        var rect = {"x":0, "y":0, "w":0, "h":0}

        canvas.addEventListener("mousedown", (e)=>{
            state.press = true;
            rect = {"x": e.offsetX, "y": e.offsetY, "w": 0, "h": 0}
        })

        canvas.addEventListener("mousemove", (e)=>{
            if(state.press){
                rect.w = e.offsetX - rect.x;
                rect.h= e.offsetY - rect.y;
                
                ctx.clearRect(0, 0, canvas.width, canvas.height)
                ctx.beginPath();
                ctx.rect(rect.x, rect.y, rect.w, rect.h);
                ctx.stroke();
            }
        })

        canvas.addEventListener("mouseup", (e)=>{
            state.press = false;

            ctx_lasting.beginPath();
            ctx_lasting.rect(rect.x, rect.y, rect.w, rect.h);
            ctx_lasting.stroke();
        })
    </script>
</body>
</html>