Úvod do úlohy

Samotný element <canvas> je jen prázdná plocha. Abychom na ni mohli kreslit, potřebujeme z ní získat tzv. vykreslovací kontext. Ten nám poskytne metody, kterými můžeme kreslit tvary, čáry, obrázky nebo text. Nejčastěji používáme 2D kontext, který vytvoříme pomocí getContext('2d'). Pokud kontext nezískáme, plátno zůstane prázdné a pokusy o kreslení povedou k chybám.

Teorie a principy

• Vykreslovací kontext 2D ('2d') je objekt, který nám umožňuje kreslit na plátno jako na papír – voláme jeho metody typu fillRect, strokeRect, fillText apod.

• Kontext získáváme voláním:

• Pokud se kontext nepodaří získat, metoda vrátí null. Proto je důležité tento výsledek zkontrolovat.

• Je také nutné, aby <canvas> mělo nastavené atributy width a height přímo v HTML. Jinak se kresba může zobrazit rozmazaně.

Praktický příklad kódu

Typické chyby

• Zapomenutý atribut width nebo height v HTML → kresba se roztahuje podle CSS a vypadá rozmazaně.

• Ignorování hodnoty null → kód se snaží volat metody na neexistujícím kontextu a spadne.

• Špatné pořadí načtení – pokud voláme getElementById dříve, než se načetl <canvas>, dostaneme null. Řešením je umístit <script> až za <canvas> nebo použít atribut defer.

Shrnutí

• <canvas> samo o sobě nekreslí – potřebujeme získat 2D kontext pomocí getContext('2d').

• Kontext může být null, proto vždy kontrolujeme, zda se vytvořil.

• Rozměry nastavujte jako atributy width a height přímo v HTML, jinak bude obraz rozmazaný.

• Jakmile máme kontext, můžeme kreslit tvary, texty a obrázky.