Végül eljött az idő arra, hogy megírjam ezt a bemutató cikket a canvasról és főleg a rajzolási állapotokról. Viszont a cikk olyan lesz, mint a felső oktatás, csupa elmélet semmi gyakorlat. :D
Viszont fogok majd a cikk végén plusz anyagot berakni és egy feladatot.

Canvas létrehozása:

A canvas ugyan úgy viselkedik, mint bármelyik HTML elem ezért 2 fajta módon lehet létrehozni.

1.statikusan: Ilyenkor egyszerűen csak belefűzzük a HTML dokumentumunkba azt ,hogy(body után):

<canvas id="myCanvas" width="300" height="200"></canvas>

Ebben az esetben kapunk egy 300x200-as méretű canvast.

2.dinamikus: Ebben az esetben JS kód segítségével kreálunk egy canvas elemet, amit aztán beszúrunk a HTML dokumentumunkba.

var canvas = document.createElement('canvas');
canvas.id = "myCanvas"; 
canvas.width = 300; 
canvas.height = 200;
document.body.appendChild(canvas);

Először létrehozzuk a canvas elemet, majd beállítjuk az id-jét,  szélességét és magasságát. Ezután pedig hozzá csatoljuk a HTML dokumentumunkhoz.

Ezekből az esetekből is kitűnik  hogy a kezelése ugyan olyan, mint ha bármelyik más HTML elemmel szórakoztunk volna.

Canvas begyütése és a 2D Context:

Ahhoz, hogy a Canvasra rajzolni is tudjunk először meg kell szerezni a canvas elemet majd ettől az elemtől megszerezni annak a 2D contextusát.  Ami így nézz ki:

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

De jöhet a kérdés, hogy mi az istenverése az a kontesztus(context)? Kontesztus, ahogy a nevéből egyeseknek kijön a rajzolási környezetet adja meg,(Például, hogy milyen színnel rajzolunk ,ami pedig az aktuális rajzolási állapothoz tartozó változó(strokeStyle)). W3C dokumentáció szerint a kontextus egy verem is egyben, ami rajzolási állapotokat(drawing state) tárol.
Megjegyzés:A verem egy adatszerkezet, ami adatokat egymás tetejére rakja és kivételnél mindig a legfelső adatot veszi le. Bővebben itt.

Kontesztus gyakorlatilag az aktuális rajzolási állapot. Emelet a kontesztus egy veremnyi rajzolási állapot  is tárol, de mi az a rajzolási állapot?

Rajzolási állapot(drawing state):

A rajzolási állapot gyakorlatilag egy tároló,ami a következőket tárolja:
  • aktuális transzformációs mátrix
  • aktuális clipping region(kivágott régió)
  • egy rakat (stílus) változó értékét:  strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin,miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font,textAlign,    textBaseline.
Transzformációs mátrix értelmezésébe nem mennék bele, mert már valamennyire elfelejtettem, hogy pontosan mit jelentenek. De emlékeimből az jön le, hogy ezek segítségével tudtunk  nagyítani, forgatni, mozgatni alakzatokat. Akit érdekel az nézze meg ezt.
A lényege, hogy ha ezzel a transzformációs mátrixszal beszorozzuk egy alakzatot, ami szintén egy mátrix(ebben az esetben a mátrix elemei az alakzat koordinátái lesznek), akkor az előbb felsorolt műveleteket tudjuk elvégezni rajta.  Sőt saját transzformációs mátrixszal általunk kigondolt átalakítást is tudunk végezni.

A kivágott régió pedig a rajzolási területet szűkíti le arra a területre, amit megadunk neki.
Ezért csak azon a régión belül tudunk rajzolni.

Amit felsoroltam változókkal tudjunk befolyásolni a rajzolás stílusát. Például strokeStyle beállítja  hogy milyen színnel húzza ki az alakzatot. pl.: context.strokeStyle="green" zöldre állítjuk az "ecsetünket".

Ezekből látszik, hogy a rajzolási állapot befolyásolja azt, hogy milyen stílusban rajzolunk meg bármit a canvason és ennek a változtatás bonyodalmakhoz vezethet ha nem kezeljük jól a rajzolási állapotokat.
Például elfelejtem, hogy megváltoztattam a rajzolásnak a színét és ezért a többi alakzatot is olyan színnel rajzolom meg.

Rajzolási állapottal való munka:

Tehát nagyon fontos az, hogy jól kezeljük ezeket az állapotokat, mivel több is lehet. A kontextusnál írtam, hogy az egy verem és mint minden egyes veremnek ennek is kell, hogy legyen két művelete.

context.save();   lementi az adott rajzolási állapotot a context verembe

context.restore();  context verem tetejéről leszedi a legutoljára elmentett rajzolási állapotot

Ezzel a két egyszerű művelettel tudunk sokkal biztonságosan rajzolni. Azért is írom ide a cikk elején, mert nagyon fontosnak tartom, hogy minden nagyobb rajzolás előtt mentsük le az alapértelmezett rajzolási állapotot és rajzolás után pedig hozzuk ezt az alap állapotot vissza.
Ez azért jó, mert minden rajzolást az alap állapotból tudunk megkezdeni és nem fogja meglepetés érni az embert. Így érdemes használni:

context.save();
//ITT rajzolgatok
context.restore();

Persze lehet őket bátran máshogy is használni, ha az ember megértette a működésüket.
Ahogy nézzem a dokumentációt, amit lent linkeltem be. Stílusok elkülönítését DrawingStyle objektummal is meg lehet oldani, viszont sokkal kevesebb stílus változóra van hatással.
Ezért ha biztos akarsz lenni, akkor használj rajzolási állapotot.

Néhány plusz anyag canvas tanuláshoz:

Ezt a három tutorialt tartom az egyik legjobbaknak a témában:
http://www.html5canvastutorials.com/tutorials/html5-canvas-tutorials-introduction/
http://diveintohtml5.info/canvas.html
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial

Dokumentáció, amiben minden benne van:
http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas_CR/Overview.html

Könyv, amit tudok a témában ajánlani az a HTML5 Canvas-nak a második kiadása, ami ebben az évben jelent meg és O'Reilly adta ki. Ebben a könyveben minden benne van, ami csak kapcsolódhat a canvashoz és a HTML5 játék készítéshez.
Sajnos még csak az elejébe volt időm beleolvasni, de nem csalódtam benne. Amazon link

Ha a tutorialokkal megvagyunk , akkor jöhet egy kis feladat:
Feladat:
Aki esetleg még mindig gondolkozik egy táblás játék elkészítésén, annak érdemes a tábla rajzolásának a megvalósításán gondolkoznia. Először ajánlom, hogy statikusan vagyis előremegadott méretű tábla megrajzolásával foglalkozunk és ha ezzel meg vagyunk lehet a tábla egyre dinamikusabb vagyis a tábla mérete egy változótól függ. Majd a tábla nagysága függjön tényleges  a képernyő méretétől, hogy mind kis és nagy képernyőn jól jelenjen meg.

Kirajzolás kigondolásához érdemes előbb papíron megrajzolni, hogy miből is áll egy tábla és ez alapján el is lehet indulni.
Ezért is jók a táblás játékok, mert könnyebb őket megrajzolni, mint más játékokat.
Kezdésnek tökéletesek.

Összességében nem tudtam vagy csak nem volt kedvem összehozni azt a fajta összefoglaló tutorialt, amit akartam ezért valószínűleg ennek a cikknek még lesznek folytatásai, ha lesz rá időm.
Na meg már annyi anyag van fent az interneten, hogy nem is tartom fontosnak, hogy csináljak egy sajátot. Viszont a rajzolási állapotok tisztázása szerintem nagyon fontos, ahhoz hogy az ember összetett rajzokat tudjon készíteni.