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

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

现在有一个.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);

这是2018年，仍然没有本地的方法来完全清除画布重新绘制。clearRect()不会完全清除画布。非填充型图纸不清除(例如。矩形())

1.要完全清除画布，无论你如何绘制:

context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.beginPath();

优点:保留strokeStyle, fillStyle等;没有滞后;

缺点:如果你在绘制任何东西之前已经使用了beginPath，那就不必要了

2.使用宽度/高度hack:

context.canvas.width = context.canvas.width;

OR

context.canvas.height = context.canvas.height;

优点:与IE兼容 缺点:重置strokeStyle, fillStyle为黑色;延迟;

我想知道为什么本地解决方案不存在。实际上，clearRect()被认为是单行解决方案，因为大多数用户在绘制任何新路径之前都会执行beginPath()。虽然beginPath只在绘制线条时使用，而不是像rect()那样使用封闭路径。

这就是为什么接受的答案并没有解决我的问题，我最终浪费时间尝试不同的方法。诅咒你mozilla

我总是用

ctx.fillStyle = "rgb(255, 255, 255)";
ctx.fillRect(0, 0, canvas.width, canvas.height);

对于自定义颜色，和

ctx.clearRect(0, 0, canvas.width, canvas.height);

用于使画布透明时清除

function clear(context, color)
{
    var tmp = context.fillStyle;
    context.fillStyle = color;
    context.fillRect(0, 0, context.canvas.width, context.canvas.height);
    context.fillStyle = tmp;
}