Canvas: Jak wyczyścić płótno?

Od kilku dni zacząłem programować mały projekt w canvas. I wpadłem na problem jak wyczyścić całe płótno.

Canvas można wyczyścić na dwa sposoby.

HTML:

<canvas id="mycanvas" width="800" height="600"></canvas>

JavaScript:

  const canvasEl = document.querySelector("#mycanvas");
  const ctx = canvasEl.getContext('2d');

Sposób 1: clearRect

Wywołujemy metodę clearRect:

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

Sprawa jest prosta. W dwóch pierwszych parametrach podajemy współrzędne od których ma zacząć się się czyszczenie. W dwóch kolejnych podajemy szerokość i wysokość czyszczonego obszaru. Z tej racji, że chcemy wyczyścić całe płótno zaczynam od lewego-górnego punktu płótna, nastę;nie podajemy jego szerokość i wysokość dzięki czemu cały obszar zostanie wyczyszczony.

Sposób 2: Ustawienie wymiaru płótna na nowo

Ten sposób jest jeszcze prostszy niż poprzedni, ale jest niezalecany. Po pierwsze spowoduje to reset płótna: stracisz wszystkie ustawienia jak: transformaty, style wypełniania, obramowania itp. Podobno ten sposób jest także wolniejszy od tego pierwszego.

canvasEl.width = canvasEl.width;