Úloha 4 – Canvas: funkce pro kreslení a čištění plátna

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