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

Úloha

Zadání (kontext úlohy):

Máš na stránce vložený <canvas>, ale ten zatím nic nekreslí. Abychom mohli začít, je potřeba získat 2D kontext a ověřit, že se to povedlo.

Cíl úlohy:

Student si procvičí získání 2D kontextu z elementu <canvas> a jednoduchou kontrolu, zda je k dispozici.

Vstupní podmínky:

Student pracuje se souborem index.html, kde je vložený <canvas> s id platno. Kód JavaScriptu bude přímo ve <script> na konci stránky.

Požadovaný výstup:

• Pomocí document.getElementById získáš odkaz na <canvas>.

• Pomocí getContext("2d") se vytvoří proměnná ctx.

• Pokud je ctx == null, vypíše se do stránky hláška „Chyba: kontext se nepodařilo získat“.

• Pokud se kontext podaří získat, vykreslí se na plátno jeden vyplněný obdélník.

Doplňující pokyny:

• Umísti <script> až za <canvas>, aby byl element načtený dříve, než se na něj odkazuješ.

• Nezapomeň nastavit atributy width a height přímo na <canvas>.

Řešení úlohy

Co je zde splněno

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

• Pomocí document.getElementById() získán odkaz na plátno.

• Použita metoda getContext("2d") a výsledek uložen do proměnné ctx.

• Přidána podmínka, která vypíše chybu, pokud je ctx == null.

• Pokud se kontext podaří získat, na plátno se vykreslí obdélník.

Poznámky

• Umístění <script> až za <canvas> je nutné, aby byl prvek v DOM dostupný.

• Výpis chyby document.write() se použije jen pro jednoduchost – v praxi se spíše píše chybová hláška do určitého elementu.