A <canvas> tag segítségével egy rajzvásznat lehet beilleszteni az oldalba. A rajzvászon tartalma JavaScript segítségével módosítható. Ezáltal dinamikusan jeleníthető meg rajta bármilyen kép, vagy grafika. Sokak véleménye szerint ez az elem veheti át a a jövőben a Flash helyét. Rá lehet másolni akár egy videó aktuális képét, alkalmas webes játékok fejlesztésére, animációk készítésére stb.
A Canvas lehetőségeinek kipróbálásához haladó JavaScript-programozásra van szükség. Ebben a tananyagban – terjedelmi okok miatt– nem foglalkozunk a JavaScript-programozással, így most csak néhány egyszerű példán keresztül mutatjuk be a vászon használatát. További példákat és leírást találunk a Canvas - Dive Into HTML5 oldalon.
Egy egyszerű (üres) vászon létrehozása az alábbi módon történik:
<canvas> </canvas>
Persze ezzel még semmit nem lehet kezdeni. Minden vászonhoz célszerű egy azonosítót rendelni és előre megadni a méretét. Az azonosítóra azért van szükség, mert a vászon tartalmát utólag JavaScript segítségével tudjuk módosítani, és a vászon elérése az azonosító (id) segítségével lehetséges. A vászon szélessége és magassága a width és a height attribútumok segítségével adható meg. Ez alapján egy 300 pixel széles és 200 pixel magas rajzterületet az alábbi kóddal kell létrehozni:
<canvas id="rajzvaszon" width="300" height="200"> </canvas>
Ha a böngésző nem támogatja a canvas taget, akkor a tag tartalma fog megjelenni a képernyőn.
Példa - Boríték rajzolása
A fenti példában létrehoztunk egy <canvas> elemet, amelynek a rajzvaszon nevet adtuk. A getcontext('2d') metódus visszaadta azt az objektumot, amely lehetővé teszi, hogy rajzoljunk a vászonra.
Ezután beállítottuk a vászon szegélyét, kitöltöttük világossárga színnel, majd pedig rajzoltunk rá két szakaszt. Így egy olyan ábrát kaptunk, amely egy borítékot ábrázol.
Természetesen a vászon és a JavaScript arra is jó, hogy interakcióba lépjünk a felhasználóval. Az alábbi kis játékot (Tic-Tac-Toe) Eduardo Abreu publikálta. (forrás: http://www.zeewe.com/blog/html5-canvas-demo-tictactoe/.
További, látványos példákat találhatunk a vászon használatára, a következő webhelyen:
21 Ridiculously Impressive HTML5 Canvas Experiments | Nettuts+
  |
 |
 |
A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.