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

我总是用这个

ctx.clearRect(0, 0, canvas.width, canvas.height)
window.requestAnimationFrame(functionToBeCalled)

NOTE

结合clearRect和requestAnimationFrame允许更流畅的动画，如果这是你想要的

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

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

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

一个快速的方法就是去做

canvas.width = canvas.width

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

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;
}