Ú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.

Úloha

Zadání (kontext úlohy):

Rozděl kód na drobné znovupoužitelné funkce a při každém překreslení nejprve vymaž celé plátno. Jedním tlačítkem scénu vykreslíš, druhým ji vyčistíš.

Cíl úlohy:

Procvičíš si clearRect() pro vyčištění plátna a jednoduchou modularizaci kódu – vytvoříš funkce pro čištění a pro kreslení tvarů.

Vstupní podmínky:

Student pracuje pouze se souborem index.html. JavaScript bude ve <script> na konci stránky.

Požadovaný výstup:

• Vytvoř funkci vycistiPlatno(ctx, canvas), která smaže celé plátno.

• Vytvoř funkci nakresliScenu(ctx), která vykreslí:

  • jeden vyplněný obdélník,

  • jeden vyplněný kruh.

• Na stránce budou dvě tlačítka: „Vykreslit“ a „Vymazat“.

  • „Vykreslit“ nejprve zavolá vycistiPlatno(...), poté nakresliScenu(...).

  • „Vymazat“ zavolá pouze vycistiPlatno(...).

• Před použitím kontextu proveď kontrolu if (ctx == null) a při chybě zobraz krátkou hlášku do stránky.

Doplňující pokyny:

• Rozměry <canvas> nastav přímo atributy width a height.

• Podmínky piš explicitně (např. if (ctx == null) místo zkrácených zápisů).

• Nepoužívej šipkové funkce ani ternární operátor. Používej let nebo const.

Řešení úlohy

Co je zde splněno

• Vytvořena funkce vycistiPlatno(ctx, canvas), která smaže celé plátno (clearRect).

• Vytvořena funkce nakresliScenu(ctx), která vykreslí obdélník a kruh.

• Přidána dvě tlačítka – „Vykreslit“ a „Vymazat“.

• Tlačítko „Vykreslit“ nejprve smaže plátno a pak vykreslí tvary.

• Tlačítko „Vymazat“ smaže plátno bez kreslení.

• Ošetřeno, aby se při ctx == null vypsala chybová hláška.