Úloha 2 – Obdélníky s výplní, obrysem a průhledností

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