在画布上用鼠标绘图。笔划与当前鼠标位置不匹配

Question

我只是学习Java脚本，我试着编写一个非常简单的画布应用程序，你可以用你的鼠标画画。但是计算变量的东西似乎是错误的。在左上角，笔划与鼠标位置完全匹配，但当您从那里移动笔划时，笔划不再与鼠标位置匹配。

这是代码：

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="js/jquery-1.10.2.js"></script>
        <script>
            jQuery(document).ready(function(){
                var stift;
                var c = document.getElementById("canvas");
                var rect = c.getBoundingClientRect();

                var context = c.getContext("2d");
                var e = 0;
                $("#canvas").mousedown(function(){
                    var x = event.clientX - rect.left;
                    var y = event.clientY -rect.top;
                    context.moveTo(x, y);
                    context.beginPath();
                    context.lineWidth = "1px";
                    context.strokeStyle = "black";
                    e = 1;

                });

                $("#canvas").mousemove(function(){
                    if(e == 1){
                        var x = event.clientX - rect.left;
                        var y = event.clientY - rect.top;
                        console.log(x+"; "+y)
                        context.lineTo(x, y);
                        context.stroke();
                    }
                })

                $("#canvas").mouseup(function(){
                    e=2;
                    context.stroke()
                    context.closePath();
                });
            });
        </script>
    </head>
    <body>
        <canvas id="canvas" style="width: 500px; height: 500px; position: absolute; top:0; left:0; border: 1px solid black;"></canvas>
    </body>
</html>

你可以看到它非常简单。但是我找不到自己的错误。提前致谢

编辑：我也创造了一个短小提琴：https://jsfiddle.net/3mb7hdcs/7/