Úloha

Zadání (kontext úlohy):

Chceme nakreslit obdélník a čtverec pomocí cesty. Oproti metodě fillRect() se u rect() jasně ukazuje, že jde o součást cesty, kterou lze obkreslit (stroke()) nebo vyplnit (fill()).

Cíl úlohy:

Student si procvičí kreslení obdélníku metodou rect() v kombinaci s beginPath(), stroke() a fill().

Vstupní podmínky:

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

Požadovaný výstup:

  • Na plátně se objeví obdélník s modrým obrysem.

  • Vedle něj čtverec vyplněný oranžovou barvou.

  • Každý tvar začíná svou cestu (beginPath()) a je ukončen (closePath()).

Doplňující pokyny:

  • Parametry metody rect(x, y, w, h): první dva jsou souřadnice levého horního rohu, další dva šířka a výška.

  • Nezapomeň na beginPath() před každým tvarem, jinak se obdélníky spojí.

  • Pro výplň použij fillStyle, pro obrys strokeStyle a lineWidth.