Obdélník (nebo čtverec) je nejjednodušší geometrický tvar, který si lze na plátně <canvas> vyzkoušet. Pomáhá studentům pochopit, že kreslení probíhá pomocí cest (path) – začínáme je, definujeme tvar a pak ho vykreslíme obrysem nebo výplní. Oproti metodě fillRect() (která nakreslí obdélník rovnou) je použití rect() zajímavé tím, že se začlenňuje do cesty a lépe ukazuje, jak kreslení na canvasu skutečně funguje. Díky tomu si studenti uvědomí, že tvary lze kombinovat, uzavírat a že pořadí volání metod rozhoduje o výsledku.

Teorie a principy

• Cesta (path): posloupnost kreslících příkazů, kterou lze vykreslit jedním příkazem stroke() nebo fill().

• Začátek kreslení: vždy beginPath(), jinak by se nové tvary připojovaly k těm starým.

• Metoda rect(x, y, width, height): přidá do cesty obdélník, jehož levý horní roh je v bodě (x, y).

• Obrys (stroke) vs. výplň (fill):

  • stroke() vykreslí jen čáry obdélníku.

  • fill() vyplní vnitřní plochu podle barvy fillStyle.

• Pořadí: beginPath() → rect(...) → stroke() nebo fill() → closePath().

Praktický příklad kódu

Typické chyby

• Zapomenutý beginPath() → nový obdélník se připojí k předchozímu tvaru.

• Volání stroke() před definováním tvaru → nic se nevykreslí.

• Záměna parametrů rect() → studenti pletou, že první dva jsou souřadnice levého horního rohu a další dva jsou rozměry (ne souřadnice protilehlého rohu).

• Chybějící closePath() → pro jednoduchý obdélník to nemusí vadit, ale u složitějších tvarů zůstane cesta „otevřená“.

Shrnutí

• Obdélník na canvasu lze kreslit nejen fillRect(), ale i metodou rect() jako součást cesty.

• Správný postup: beginPath() → rect() → nastavení stylu → stroke() nebo fill() → closePath().

• Levý horní roh se určuje prvními dvěma parametry (x, y), šířka a výška dalšími dvěma.

• stroke kreslí obrys, fill vyplňuje plochu.

• U složitějších tvarů a kombinací cest je dobré vždy cestu uzavírat.