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

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绘制了一个透明像素。然后，恢复以前的上下文状态。

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

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

// 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);

使用clearRect方法通过传递x,y坐标和画布的高度和宽度。ClearRect将清除整个画布:

canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);

This is a Free hand drawing Canvas with a Clear Canvas Button. See this live example of a canvas which you can draw on and also when required clear it for redrawing clearRect() is used to delete the prersent canvas and fillRect() is used to again draw the initial canvas which was clean and had no drawings on it. var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"), painting = false, lastX = 0, lastY = 0, lineThickness = 1; canvas.width=canvas.height = 250; ctx.fillRect(0, 0, 250, 250); canvas.onmousedown = function(e) { painting = true; ctx.fillStyle = "#ffffff"; lastX = e.pageX - this.offsetLeft; lastY = e.pageY - this.offsetTop; }; canvas.onmouseup = function(e){ painting = false; } canvas.onmousemove = function(e) { if (painting) { mouseX = e.pageX - this.offsetLeft; mouseY = e.pageY - this.offsetTop; // find all points between var x1 = mouseX, x2 = lastX, y1 = mouseY, y2 = lastY; var steep = (Math.abs(y2 - y1) > Math.abs(x2 - x1)); if (steep){ var x = x1; x1 = y1; y1 = x; var y = y2; y2 = x2; x2 = y; } if (x1 > x2) { var x = x1; x1 = x2; x2 = x; var y = y1; y1 = y2; y2 = y; } var dx = x2 - x1, dy = Math.abs(y2 - y1), error = 0, de = dy / dx, yStep = -1, y = y1; if (y1 < y2) { yStep = 1; } lineThickness = 4; for (var x = x1; x < x2; x++) { if (steep) { ctx.fillRect(y, x, lineThickness , lineThickness ); } else { ctx.fillRect(x, y, lineThickness , lineThickness ); } error += de; if (error >= 0.5) { y += yStep; error -= 1.0; } } lastX = mouseX; lastY = mouseY; } } var button=document.getElementById("clear"); button.onclick=function clearcanvas(){ canvas=document.getElementById("canvas"), ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, 250, 250); canvas.width=canvas.height = 250; ctx.fillRect(0, 0, 250, 250);} #clear{border-radius:10px; font-size:8px !important; position:absolute; top:1px;} #canvas{border-radius:10px} <link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/> <button id="clear" class="w3-padding w3-xxlarge w3-pink" type="button">Clear Canvas</button> <canvas id="canvas"></canvas>

我总是用

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

对于自定义颜色，和

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

用于使画布透明时清除

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

希望它能帮助到别人。