So löschen Sie den Canvas für das Neuzeichnen

Verwenden: context.clearRect(0, 0, canvas.width, canvas.height);

Dies ist die Schnellste und die meisten beschreibenden Weg zum löschen der gesamten Leinwand.

Nicht verwenden: canvas.width = canvas.width;

Zurücksetzen canvas.width setzt alle Leinwand-Staat (z.B. Transformationen, lineWidth, strokeStyle, etc.), es ist sehr langsam (im Vergleich zu clearRect), es funktioniert nicht in allen Browsern, und es nicht beschreiben, was du eigentlich machen willst.

Umgang mit transformierten Koordinaten

Wenn Sie geändert haben die Transformations-matrix (z.B. mit scalerotate oder translate) dann context.clearRect(0,0,canvas.width,canvas.height) wird wahrscheinlich nicht klar, dass das gesamte sichtbare Bereich der Leinwand.

Die Lösung? Zurücksetzen der transformation matrix vor der leeren Leinwand:

//Store the current transformation matrix
context.save();

//Use the identity matrix while clearing the canvas
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect(0, 0, canvas.width, canvas.height);

//Restore the transform
context.restore();

Edit:
Ich habe nur getan, einige Profilerstellung und (in Chrome) ist es über 10% deutlich schneller auf einer 300x150 (Standard-Größe) Leinwand ohne zurücksetzen der Transformation. Die Größe der Leinwand erhöht sich dieser Unterschied fällt.

Dass ist schon relativ klein, aber in den meisten Fällen wird die Zeichnung wesentlich mehr, als Sie klärt, und ich glaube, dieser performance-Unterschied irrelevant.

100000 iterations averaged 10 times:
1885ms to clear
2112ms to reset and clear

InformationsquelleAutor der Antwort Prestaul

Andere bereits getan haben eine ausgezeichnete Arbeit der Beantwortung der Frage aber, ob eine einfache clear() Methode auf dem Kontext-Objekt wäre nützlich für Sie (es war für mich), dies ist die Implementierung, die ich verwenden, basieren auf den Antworten hier:

CanvasRenderingContext2D.prototype.clear = 
  CanvasRenderingContext2D.prototype.clear || function (preserveTransform) {
    if (preserveTransform) {
      this.save();
      this.setTransform(1, 0, 0, 1, 0, 0);
    }

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

    if (preserveTransform) {
      this.restore();
    }           
};

Verwendung:

window.onload = function () {
  var canvas = document.getElementById('canvasId');
  var context = canvas.getContext('2d');

  //do some drawing
  context.clear();

  //do some more drawing
  context.setTransform(-1, 0, 0, 1, 200, 200);
  //do some drawing with the new transform
  context.clear(true);
  //draw more, still using the preserved transform
};

InformationsquelleAutor der Antwort JonathanK

Verwenden clearRect-Methode durch übergabe der x,y-Koordinaten sowie Höhe und Breite der Leinwand. ClearRect löscht ganze Leinwand als :

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

InformationsquelleAutor der Antwort Vishwas

in webkit, die Sie brauchen, um stellen Sie die Breite auf einen anderen Wert, dann können Sie es wieder auf den ursprünglichen Wert

InformationsquelleAutor der Antwort John Allsopp

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

InformationsquelleAutor der Antwort Imagine Breaker

Schnellste Weg:

canvas = document.getElementById("canvas");
c = canvas.getContext("2d");

//... some drawing here

i = c.createImageData(canvas.width, canvas.height);
c.putImageData(i, 0, 0); //clear context by putting empty image data

InformationsquelleAutor der Antwort elser

Dies ist 2018 und immer noch gibt es keine native Methode, um vollständig zu löschen die Leinwand für das Neuzeichnen. clearRect() hat nicht klar, die Leinwand komplett. Nicht-fill type Zeichnungen sind nicht gelöscht (zB. rect())

1.Zu komplett klar canvas-unabhängig davon, wie Sie zu zeichnen:

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

Vorteile: Bewahrt strokeStyle, fillStyle, etc.; Keine Verzögerung;

Nachteile: Unnötig, wenn Sie bereits mit beginPath vor dem auftragen etwas

2.Mit dem Breite/Höhe-hack:

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

ODER

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

Vorteile: Funktioniert mit IE
Nachteile: Setzt strokeStyle, fillStyle, schwarz; Laggt;

Ich Frage mich, warum eine native Lösung nicht vorhanden ist. Eigentlich clearRect() ist als die single-line-Lösung, weil die meisten Benutzer tun beginPath() vor dem zeichnen irgendwelche neuen Weg. Obwohl beginPath nur verwendet werden, beim zeichnen von Linien und nicht geschlossenen Pfad wie rect().

Dies ist der Grund, warum die akzeptierte Antwort hat mein problem nicht lösen und ich landete verschwenden Stunden versucht verschiedene hacks. Fluch Sie mozilla

InformationsquelleAutor der Antwort sziraqui

Dies ist, was ich verwenden, unabhängig von Grenzen und matrix-Transformationen:

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

Grundsätzlich, speichert es den aktuellen Zustand des Kontext, und zieht eine transparente pixel mit copy als globalCompositeOperation. Dann stellt die bisherigen Kontext Staat.

InformationsquelleAutor der Antwort superruzafa

context.clearRect(0,0,w,h)   

füllen Sie das gegebene Rechteck mit RGBA-Werte :

0 0 0 0 : mit Chrome

0 0 0 255 : mit FF & Safari

Aber

context.clearRect(0,0,w,h);    
context.fillStyle = 'rgba(0,0,0,1)';  
context.fillRect(0,0,w,h);  

lassen Sie das Rechteck gefüllt mit

0 0 0 255

egal, die browser !

InformationsquelleAutor der Antwort Philippe Oceangermanique

Context.clearRect(starting width, starting height, ending width, ending height);

Beispiel: context.clearRect(0, 0, canvas.width, canvas.height);

InformationsquelleAutor der Antwort Gavin T