HTML <canvas>

Anglický výraz canvas jde přeložit do češtiny jako plátno.

Před <canvas>em byl prakticky jediný způsob, jak něco JavaScriptem na stránce nakreslit, vytváření HTML elementů a jejich vhodné stylování.

Canvas umožňuje libovolně kreslit doslova pixel po pixelu.

Podpora

Kreslení do <canvas>u je široce podporováno napříč prohlížeči.

Nejméně zastaralý prohlížeč, kde podpora chybí, je Internet Explorer 8.

Mobilní prohlížeč Opera Mini potom neumí <canvas> animovat.

Zápis

Značka <canvas> sama o sobě nedělá prakticky nic.

Kromě globálních atributů (id, title a podobně) podporuje pouze nastavení rozměrů přes width a height (jednotky px se neuvádí, byť se s jejich přítomností dokáží prohlížeče vypořádat).

<canvas width="300" height="300" id="platno">
  <p>Prohlížeč nepodporuje canvas.</p>
</canvas>

Do obsahu značky jde umístit obsah pro prohlížeče, co <canvas> neznají – tedy například IE 8 a starší.

Kreslení

Aby se plátno nějak projevilo, musí se na něj něco nakreslit. To se dělá JavaScriptem:

var canvas = document.getElementById("platno");
var ctx = canvas.getContext("2d");

První řádek vybere značku <canvas>, druhý si vytáhne její 2D kontext (existuje ještě 3D kontext).

Do kontextu je nyní možné psát a kreslit. Ukázka:

Pro lepší pochopení jsou ideální ukázky na stránce html5canvastutorials.com, kde jde přímo upravovat kód a rovnou vidět, jak se výsledek mění:

Specifika „plátna“

Kreslení do canvasu je maximálně nízkoúrovňové. Pokud se na plátno nakreslí čára, plátno to nijak neví – pouze se v něm přebarvily pixely na místě, kudy čára vede.

Zpětně tedy není možné zjistit, kudy čára vedla, a třeba ji jednoduše přesunout jinam. Canvas funguje podobně jako staré malování ve Windows.

V praxi se to řeší tak, že jsou informace o nakreslených položkách uloženy v JS objektu a při změnách se celé plátno překreslí.

Kreslení do <canvas>u je hodně rychlé, takže překreslování moc nevadí.

Využití

Úprava obrázků

Asi nejzajímavější je využití pro úpravu obrázků. Díky <canvas>u existuje řada grafických editorů fungujících přímo v prohlížeči:

Pro základní úpravy obrázků, jako je změna rozměrů, otočení nebo převrácení, není díky plátnu a JS nutné tyto operace provádět na straně serveru. To šetří výkon serveru a zlepšuje rychlost odezvy u uživatele, protože se každá úprava nemusí přenášet tam a zase zpátky.

Grafy

Pro kreslení grafů pomocí JS je canvas možné řešení. Pro interaktivní grafy je ale jednodušší používat SVG – jednotlivé prvky grafu u SVG jsou prvky DOMu, takže je pohodlnější na ně navázat různé JS události.

Hry

Většina náročnějších her běžících v prohlížeči vykresluje svůj obsah do plátna tvořeného značkou <canvas>.

Pro prohlížečové hry existují hotové enginy (2D i 3D), takže není obvykle nutné se starat o vykreslování na té nejnižší úrovni.

Jednodušší 2D hry se obejdou i bez canvasu a vystačí si s prostou manipulací HTML elementů.

Odkazy jinam

• MDN: Canvas API
• Introduction to HTML5 canvas