您应该使用“beginPath（）"。就是这样。

function lineDraw() {   
    var canvas=document.getElementById("myCanvas");
    var context=canvas.getContext("2d");
    context.clearRect(0, 0, context.width,context.height);
    context.beginPath();//ADD THIS LINE!<<<<<<<<<<<<<
    context.moveTo(0,0);
    context.lineTo(event.clientX,event.clientY);
    context.stroke();
}

请注意ctx.clearRect（）不能在Google Chrome上正常工作。我花了几个小时试图解决一个相关的问题，却发现在Chrome上，它实际上用rgba（0，0，0，0）填充矩形，而不是用rgba（0，0，0，1）填充矩形！
因此，为了用所需的透明黑色像素 * 正确地 * 填充矩形，您需要在Chrome上执行以下操作：

ctx.fillStyle = "rgba(0, 0, 0, 0)";
ctx.fillRect(left, top, width, height);

当然，这应该适用于所有为HTML5 Canvas对象提供适当支持的浏览器。

我们需要用到beginPath（）和stroke（），这段代码和clearRect（...）的工作原理一样。

ctx.beginPath();
ctx.fillStyle = "rgba(0, 0, 0, 255)";
ctx.fillRect(0, 0, canvas.width, canvas.height);    
ctx.stroke();

如果你用这种方法得到一个黑屏

ctx.beginPath()
ctx.fillStyle = "rgba(0, 0, 0, 255)"
ctx.fillRect(0, 0, canvas.width, canvas.height)    
ctx.stroke();

然后将rgba中的所有0切换到255

ctx.beginPath();
ctx.fillStyle = "rgba(255, 255, 255, 255)";
ctx.fillRect(0, 0, canvas.width, canvas.height);    
ctx.stroke();

尝试使用context.canvas.width = context.canvas.width：

function lineDraw() {   
    var canvas=document.getElementById("myCanvas");
    var context=canvas.getContext("2d");
    //context.clearRect(0, 0, context.width,context.height);
    context.canvas.width = context.canvas.width;
    context.moveTo(0,0);
    context.lineTo(event.clientX,event.clientY);
    context.stroke();
}

演示HERE