Je canvas připraven pro web?

Canvas je element adoptovaný webovými prohlížeči určený ke kreslení 2D a 3D grafiky ve webových stránkách. Spefikaci canvasu najdeme u skupiny WHATWG. Můžeme canvas už dnes na webu používat?

Vývoj webu v posledních letech přál spíše webdesignerům (zej. nové verze CSS a jejich lepší a lepší implementace v prohlížečích). Vývojáři interaktivních webových aplikací zůstávali poněkud zkrátka a každý krok vpřed vítali jásotem. Vzpomeňme si na boom AJAXu. Uvidíme, zaznamená-li <canvas> podobný boom nebo zůstane jen hračkou vývojářských nadšenců.

Kdy použít <canvas>?

Napřed hlavní důvody, proč bychom chtěli dnes <canvas> použít. Mě napadají dva:

Interaktivní grafika v prohlížeči

Když chceme interaktivní grafické prvky, saháme často po Flashi. Flash je skvělý nástroj s pokročilým vývojovým prostředím, ale <canvas> nám umožňuje zobrazit interaktivní grafiku přímo pomocí prohlížeče bez nutnosti dalších plug-inů (které pro některé platformy nemusí vůbec existovat). V některých případech by <canvas> mohl Flash směle nahradit.

RIA – Rich Internet Application

Poslední dobou se na webu objevují aplikace, o kterých se nám před lety jen snilo, např. kancelářský balík od Googlu a možná se dočkáme i pokročilého grafického editoru. Často se nazývají Rich Internet Application. <canvas> může jejich tvorbu usnadnit a posunout ji o krok dál.

Ukázka použití <canvas>u

Do stránky stačí vložit element :

    <canvas id="canvas" width="250" height="200"></canvas>

A můžeme do něj začít JavaScriptem kreslit:

    var canvas = document.getElementById("canvas");
    // overime, zda prohlizec <canvas> podporuje
    if (canvas.getContext) {
      // zvolime 2D krelici rezim (dalsi variantou by byl 3D)
      var context = canvas.getContext("2d");
      // vykreslime ctverec
      context.fillRect(10, 10, 50, 50);
    }

Jednoduchá ukázka použití.

Podpora v prohlížečích

Při rozhodování, zda <canvas> použít, bude zásadní podpora ve webových prohlížečích. <canvas> podporují Opera i Safari, Firefox (od verze 1.5), Seamonkey a další Geckové prohlížeče. Jistě jste si všimli, že v seznamu není Internet Explorer. Naštěstí tu je projekt ExplorerCanvas, který umožňuje <canvas> v IE6 i IE7 emulovat. Proto také ukázka výše funguje i v IE. Jedná se o 20kB JavaScriptový soubor, který pomocí podmíněných komentářů vložíme do stránky.

    <!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->

Vlastní kód ve stránce již není třeba upravovat.

Další ukázky

(následující 3 ukázky byly převzaty z projektu ExplorerCanvas):

• 2D animovaná grafika (v IE trochu pomalé)
• 3D grafika
• práce s bitmapami

Jako složitější ukázku lze uvést Canvascape – 3D walker, neboli pokus vytvořit pomocí <canvas>u 3D herní engine. Po kliknutí do obrázku můžete pomocí kurzorových kláves procházet bludištěm včetně skákání, nalevo vidíte mapku. Pokud vám to nepřipádá dostatečné, zkuste kliknout vpravo na textured version. Emulace v IE je zde ale již nepoužitelně pomalá.

Pěknou aplikací je CanvasPaint, snažící se napodobit klasický MS Paint (nefunguje v IE). Zde již narazíme na problémy. Prohlížeče zatím nepodporují specifikaci <canvas>u na 100%, viz dokumentace napravo.

Používat nebo ne?

Čas pro masové nasazení <canvas>u zatím ještě nenastal, ale myslím, že již teď je podpora v prohlížečích zralá k experimentování a – pokud se to do vašeho projektu hodí – i prvního nasazení jednodušších <canvas>ů na web. Zda se <canvas> rozšíří více, ukáže čas.

Zajímavé odkazy

• <canvas> tutoriál
• <canvas> specifikace (zatím draft)
• O WHATWG
• Vladimir Vukićević navrhuje zrychlit <canvas> pomocí OpenGL
• <canvas> v Opeře