一个快速的方法就是去做

canvas.width = canvas.width

我不知道它是如何工作的，但它确实如此!

如果你只使用clearRect，如果你在一个表单中提交你的图纸，你会得到一个提交而不是清除，或者可能它可以先清除，然后上传一个无效的图纸，所以你需要在函数的开头添加一个preventDefault:

   function clearCanvas(canvas,ctx) {
        event.preventDefault();
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }


<input type="button" value="Clear Sketchpad" id="clearbutton" onclick="clearCanvas(canvas,ctx);">

希望它能帮助到别人。

假设canvas是一个canvas元素或者OffscreenCanvas对象，使用clearRect:

const context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);

一个快速的方法就是去做

canvas.width = canvas.width

我不知道它是如何工作的，但它确实如此!

在webkit中，您需要将宽度设置为不同的值，然后您可以将其设置回初始值

我发现在我测试的所有浏览器中，最快的方法是用白色填充rect，或者任何你想要的颜色。我有一个非常大的显示器，在全屏模式下，clearRect非常慢，但fillRect是合理的。

context.fillStyle = "#ffffff";
context.fillRect(0,0,canvas.width, canvas.height);

缺点是画布不再是透明的。