Úloha

Zadání (kontext úlohy):

Nakresli na <canvas> jednoduchý „cílový terč“: několik soustředných kruhů uprostřed barevného obdélníku. Přidej tlačítko Vyčistit, které smaže vnitřní oblast a terč znovu vykreslí.

Cíl úlohy:

Procvičit vytvoření a nastavení <canvas>, získání 2D kontextu, kreslení obdélníku (fillRect), kruhů (beginPath, arc, fill, stroke) a mazání části plátna (clearRect).

Vstupní podmínky:

  • Pracuj se soubory index.html a script.js.

  • Používej pouze let a const (žádné var).

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

  • Pokud používáš podmínky, porovnávej výslovně (if (podminka == true) / if (podminka == false)).

Požadovaný výstup:

  1. Na plátno vykresli podkladový obdélník (pozadí terče).

  2. Doprostřed nakresli minimálně tři soustředné kruhy (největší vzadu).

  3. Okraj nejmenšího kruhu obtáhni čárou (stroke).

  4. Tlačítko Vyčistit smaže vnitřní obdélník terče pomocí clearRect() a terč znovu vykreslí.

  5. Po načtení stránky se terč vykreslí automaticky.

Doplňující pokyny:

  • Pro souřadnice středu použij šířku a výšku plátna (střed = width/2, height/2).

  • Barvy zvol libovolné kontrastní.

  • Funkce si rozděl: zvlášť pro podklad, zvlášť pro kruhy a zvlášť pro kompletní překreslení.