Canvas je plocha, na kterou kreslíme pomocí souřadnic. Každý bod na plátně má x (vodorovnou) a y (svislou) souřadnici.

• Osa X roste směrem doprava.

• Osa Y roste směrem dolů.

• Levý horní roh má souřadnice (0, 0).

To je jiné než v matematice, kde obvykle osa Y roste nahoru. V canvasu tedy platí, že čím větší hodnota y, tím níž se tvar vykreslí. Pokud nakreslíme obdélník na (20, 20) o rozměrech 100 × 50, bude začínat 20 pixelů od levého a 20 pixelů od horního okraje a zabere prostor až po bod (120, 70).

Kreslení není omezeno jen na čáry – velmi často potřebujeme vyplněné tvary. Canvas nám nabízí jednoduché metody pro obdélníky, kruhy a také gumování. Naučíme se také používat barvy a průhlednost.

Teorie a principy

• Obdélníky:

  • fillRect(x, y, w, h) – vyplněný obdélník.

  • strokeRect(x, y, w, h) – jen obrys.

  • clearRect(x, y, w, h) – smaže část plátna.

• Cesty a kruhy:

  • beginPath() – začátek nové cesty.

  • arc(x, y, r, startAngle, endAngle) – nakreslí oblouk nebo celý kruh (úhly v radiánech).

  • fill() – vyplní cestu.

  • stroke() – obkreslí cestu.

• Stylování:

  • ctx.fillStyle = "barva"; – barva výplně.

  • ctx.strokeStyle = "barva"; – barva obrysu.

  • ctx.globalAlpha = číslo; – průhlednost (0 = průhledné, 1 = neprůhledné).

Praktické příklady kódu

Typické chyby

• Zapomenutý beginPath() → kruh se spojí s předchozím tvarem.

• Použití stupňů místo radiánů → arc() vyžaduje úhly v radiánech (Math.PI místo 180).

• Neobnovení globalAlpha → další tvary zůstávají průhledné, i když jsme to nechtěli.

• Představa, že osa Y roste nahoru → ve skutečnosti roste dolů.

• Záměna souřadnic se šířkou a výškou → u fillRect první dva parametry jsou pozice, další dva rozměry.

Shrnutí

• Canvas má souřadnicový systém s počátkem v levém horním rohu (0,0).

• Osa X roste doprava, osa Y dolů.

• Obdélníky: fillRect, strokeRect, clearRect.

• Kruhy: arc + fill nebo stroke.

• Styly kreslení se nastavují přes fillStyle, strokeStyle a globalAlpha.

• clearRect funguje jako „guma“ na části plátna.