HTML5 Canvas leeren oder löschen um neu zu zeichnen

Mit der Funktion clearRect() lässt sich ein Bereich deines Canvas löschen. Man übergibt der Funktion die Werte X, Y, W und H des Bereichs, der gelöscht werden soll.

Um den kompletten Canvas zu löschen entsprechend den Punkt 0/0 und die Höhe und Breite des Canvas:

var x = 0;
var y = 0;
var w = context.canvas.width;
var h = context.canvas.height;

context.clearRect(x, y, w, h);

Wenn du nur Bereiche deines Canvas löschen möchtest, kannst du entsprechend einen anderen Punkt oder kleinere Werte für die Breite und Höhe übergeben. Natürlich kannst du die Werte von w und h auch direkt angeben, je nachdem wie groß dein Canvas ist.

Wichtig: Wenn du die Funktion translate() benutzt hast, musst du dies bei der Angabe der Koordinaten beachten.
22.05.2014 um 17:17