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

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

一种简单但不太好读的方式是这样写的:

var canvas = document.getElementId('canvas');

// after doing some rendering

canvas.width = canvas.width;  // clear the whole canvas

如果你在画线条，请确保不要忘记:

context.beginPath();

否则这些行就不会被清除。

这是我使用的，不管边界和矩阵变换:

function clearCanvas(canvas) {
  const ctx = canvas.getContext('2d');
  ctx.save();
  ctx.globalCompositeOperation = 'copy';
  ctx.strokeStyle = 'transparent';
  ctx.beginPath();
  ctx.lineTo(0, 0);
  ctx.stroke();
  ctx.restore();
}

基本上，它保存了上下文的当前状态，并以globalCompositeOperation为copy绘制了一个透明像素。然后，恢复以前的上下文状态。

我总是用

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

对于自定义颜色，和

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

用于使画布透明时清除