Úloha

Zadání (kontext úlohy):

Na plátno chceme vykreslit několik obdélníků s různým vzhledem – jeden jen vyplněný, druhý s kombinací výplně a obrysu, třetí poloprůhledný.

Cíl úlohy:

Student si procvičí práci s metodami fillRect() a strokeRect(), použití fillStyle, strokeStyle, lineWidth a globalAlpha.

Vstupní podmínky:

Student pracuje se souborem index.html, kde je vložen <canvas> s id platno. JavaScript bude ve <script> na konci stránky.

Požadovaný výstup:

  • První obdélník: pouze barevná výplň (např. světle modrá).

  • Druhý obdélník: oranžová výplň + červený obrys se silnější čarou.

  • Třetí obdélník: zelený, ale poloprůhledný.

Doplňující pokyny:

  • Nezaměňuj fillStyle a strokeStyle – první ovlivňuje výplň, druhý obrys.

  • Po použití globalAlpha vrať hodnotu zpět na 1.0, aby další tvary nebyly průhledné.

  • Nejprve vykresli výplň, teprve potom obrys (jinak může být překrytý).