Úloha 1 – Vytvoření a nastavení s atributy width a height

Úvod do úlohy

Canvas je „malířské plátno“ přímo v prohlížeči. Umožní ti kreslit čáry, tvary, texty i obrázky a hodí se pro vizualizace, jednoduché hry nebo animace. Úplným základem je správně vložit <canvas> do HTML a nastavit mu jednoznačnou velikost. Bez šířky a výšky zůstane plátno nenápadné a při ladění snadno přehlédnutelné – proto budeme pracovat také s okrajem (ohraničením), aby bylo jasně vidět, kde a v jakých rozměrech se kreslí.

Teorie a principy

• Element <canvas> je prázdná obdélníková plocha. Výchozí velikost je 300×150 px, pokud nepoužiješ atributy width a height.

• Nastavuj rozměry atributy:

  • width a height na <canvas> určují vnitřní kreslicí plochu v pixelech.

  • CSS (width, height) ovlivňuje jen zobrazení (může dojít k roztažení/zmenšení a rozmazání).

  • Na začátku proto vždy nastav width a height přímo na elementu.

• Viditelnost při ladění: přidej do CSS ohraničení (např. 1px dashed) a ve vývojářských nástrojích ověř, že element na stránce opravdu existuje.

• Přístup ke kontextu: kreslí se přes tzv. renderovací kontext, nejčastěji 2d. Je nutné získat jej voláním getContext("2d"). Když se vrátí null, nelze kreslit (např. starý prohlížeč, překlepy).

• Pracovní postup:

  1. vlož <canvas id="plátno" width="... " height="...">,

  2. v JS najdi element přes document.getElementById,

  3. získej ctx = canvas.getContext("2d"),

  4. kresli (čtverec, čára, text),

  5. při chybách hned zkontroluj existenci elementu a kontextu.

Praktické příklady kódu

Tip: Když nevidíš nic vykreslené, otevři Vývojářské nástroje (F12) → panel Elements/Inspector a zkontroluj, zda <canvas id="plátno"> existuje a má očekávané atributy width a height. Ohraničení v CSS pomůže potvrdit, kde přesně je.

Typické chyby / záludnosti

• Chybí atributy width a height → kreslíš do výchozích 300×150 px, a zbytek je jen roztažený přes CSS (může působit rozmazaně).

• Záměna CSS rozměrů za vnitřní plochu: #plátno { width: 800px; } není totéž jako width="800" na elementu. Pro ostré vykreslování nastav hodnotu jako atribut.

• Špatné id: getElementById("platno") nenajde id="plátno" – pozor na diakritiku a přesný název.

• Kontext je null: bez ctx se nedá kreslit – ověř canvas.getContext("2d").

• Canvas je mimo viewport: element existuje, ale není vidět (např. mimo obrazovku nebo překrytý). Ohraničení pomůže problém rychle odhalit.

Shrnutí

• Vlož do HTML <canvas> a nastav id, width, height – tím určíš přesné kreslicí rozměry.

• Pro viditelnost přidej CSS ohraničení a v DevTools ověř, že element existuje.

• Kreslení probíhá přes getContext("2d"); bez něj to nepůjde.

• Rozlišuj atributy rozměru (kreslicí plocha) vs. CSS velikost (zobrazení).

• Při problémech postupuj: zkontroluj existenci elementu → kontext → rozměry → pozici na stránce.

Úloha

Zadání (kontext úlohy):

Chceš začít kreslit do canvasu, ale nejdřív musí být na stránce dobře vidět, kde plátno je a jak velké má rozměry.

Cíl úlohy:

Student si procvičí vložení elementu <canvas> do HTML, nastavení správné šířky a výšky přes atributy a přidání okraje pomocí CSS.

Vstupní podmínky:

Student pracuje pouze s nově vytvořeným souborem index.html.

Požadovaný výstup:

• Na stránce bude prázdné plátno <canvas> o velikosti 400×200 px.

• Plátno bude mít v CSS viditelné orámování (např. čárkované).

• Po otevření v prohlížeči bude jasně patrné, kde se nachází a jaké má rozměry.

Doplňující pokyny:

• Rozměry nastav přímo jako atributy width a height na <canvas>, ne jen přes CSS.

• Zkontroluj, že id v HTML odpovídá id v CSS (pozor na překlepy a diakritiku).

Řešení úlohy

Co je zde splněno

• Do HTML vložen element <canvas> s atributy width="400" a height="200".

• Přidáno CSS orámování (border: dashed), takže je jasně vidět, kde plátno je.

• Id v HTML (platno) souhlasí s id v CSS.

Poznámky

• Rozměry musí být vždy nastaveny atributy width a height, jinak bude plátno ve výchozím nastavení 300×150 px.

• Stylování pomocí CSS (např. border) se nepromítá do kreslení na plátně, ale pomáhá ho vizuálně odlišit.