如果你只使用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);

这些都是如何清除标准画布的好例子，但如果你使用的是paperjs，那么这将工作:

用JavaScript定义一个全局变量:

var clearCanvas = false;

从你的PaperScript定义:

function onFrame(event){
    if(clearCanvas && project.activeLayer.hasChildren()){
        project.activeLayer.removeChildren();
        clearCanvas = false;
    }
}

现在无论你在哪里设置clearCanvas为true，它都会从屏幕上清除所有的项目。

Chrome响应良好:上下文。clearRect (x, y, w, h);正如@Pentium10所建议的，但IE9似乎完全忽略了这条指令。 IE9似乎对:canvas做出了响应。宽度= canvas.width;但它不清除线条，只是形状，图片和其他物体，除非你也使用@John Allsopp的解决方案，首先改变宽度。

如果你有一个canvas和context是这样创建的:

var canvas = document.getElementById('my-canvas');
var context = canvas.getContext('2d');

你可以使用这样的方法:

function clearCanvas(context, canvas) {
  context.clearRect(0, 0, canvas.width, canvas.height);
  var w = canvas.width;
  canvas.width = 1;
  canvas.width = w;
}

现在有一个.reset()方法，它不仅会清除画布缓冲区，还会完全重置上下文的所有属性(样式等)，重置它的转换矩阵，清除它的当前子路径，清除它的状态堆栈(由save()和restore()控制)，并删除所有的剪辑区域。

context.reset();
// now 'context' is clear as new

基本上，它具有与canvas相同的效果。Width += 0，除了它更习惯。

然而，在当前的Chromium实现中，它似乎和canvas一样慢。Width += 0时，它也会生成一个新的缓冲区，而不是简单地清除前一个缓冲区(导致更多的内存垃圾)。另一个警告是，它目前只在铬浏览器中支持。 虽然要填充它，你可以去Chrome的方式

if (!CanvasRenderingContext2D.prototype.reset) {
  CanvasRenderingContext2D.prototype.reset = function() {
    this.canvas.width += 0;
  };
}
if (!OffscreenCanvasRenderingContext2D.prototype.reset) {
  OffscreenCanvasRenderingContext2D.prototype.reset = function() {
    this.canvas.width += 0;
  };
}

这里有很多很好的答案。 还有一点需要注意的是，有时候只清除部分画布也很有趣。 也就是说，“淡出”之前的图像，而不是完全擦除它。 这样可以产生很好的轨迹效果。

很容易。假设你的背景颜色是白色:

// assuming background color = white and "eraseAlpha" is a value from 0 to 1.
myContext.fillStyle = "rgba(255, 255, 255, " + eraseAlpha + ")";
myContext.fillRect(0, 0, w, h);