Úvod do úlohy

Při kreslení více tvarů nebo při animaci je nutné plátno vyčistit před každým novým vykreslením. Jinak by se staré kresby „vrstvy“ hromadily a obraz by byl nepřehledný (šmouhy, duchy). Metoda clearRect(0, 0, canvas.width, canvas.height) smaže celý obsah plátna a připraví scénu na novou kresbu.
Současně je praktické běžné postupy (vyčištění, vykreslení obdélníku, nakreslení kruhu) vyčlenit do samostatných funkcí. Díky tomu je kód přehledný, znovupoužitelný a snadno rozšiřitelný – přesně to, co budeme potřebovat u delších úloh i animací.

Teorie a principy

• Proč čistit: Při každém snímku animace nebo při překreslování v cyklu nejdřív vymažeme starý stav a až pak nakreslíme nový. Zabráníme tak vizuálním artefaktům.

• Jak čistit:

  • Celé plátno: ctx.clearRect(0, 0, canvas.width, canvas.height)

  • Jen část: ctx.clearRect(x, y, width, height)

• Pořadí kroků při překreslení:

  1. clearRect → 2) aktualizace dat (souřadnice, barvy) → 3) kreslení tvarů → 4) plán dalšího kroku (u animace requestAnimationFrame).

• Modularizace: Opakované sekvence (např. „začni cestu → definuj tvar → nastav styl → vykresli“) přesuňte do funkcí. Kód bude kratší, srozumitelnější a méně chybový.

Praktické příklady kódu

Všimněte si, že animace při každém snímku nejdřív volá vycistiPlatno(...). Kdybychom čistili jen občas, objekt by zanechával stopu.

Typické chyby / záludnosti

• Zapomenuté clearRect v animaci → na plátně zůstávají staré polohy objektů (šmouhy).

• Mazání po kreslení → objekt zmizí; čistěte před kreslením.

• Neobnovený globalAlpha → zůstanou poloprůhledné i další tvary.

• Mixování cest bez beginPath() a closePath() → nechtěné spojování tvarů.

• Nepřehledný kód bez funkcí → těžko se opravuje; extrahujte rutiny (čištění, obdélník, kruh).

Shrnutí

• Pro nové vykreslení vždy nejprve vyčistěte plátno: clearRect(0, 0, canvas.width, canvas.height).

• U animací opakujte cyklus: vyčistit → aktualizovat → kreslit → požádat o další snímek.

• Oddělte opakované postupy do samostatných funkcí (čištění, obdélník, kruh) – kód je modulární a snadno se rozšiřuje.

• Dbejte na pořadí volání a na explicitní kontroly (např. if (ctx == null) { ... }), ať nedochází k chybám.