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