Uvođenje Canvasa u dokument
Canvas je verovatno najpopularnija novina koju je doneo HTML5. Naravno, u pitanju je mogućnost da kreiramo sopstvenu grafiku na web stranici. Sam canvas se ponaša kao "prazna slika", koja se onda može iscrtavati pomoću JavaScript programa.
Uvođenjem canvas-a u HTML standard, otvorio se veliki broj mogućnosti koje do sada nisu bile izvodljive na web-u - kreiranje dijagrama i grafikona na osnovu podataka, aplikacije za crtanje, animacija i igre, 3D grafika...
Da bi se Canvas element uveo u dokument, koristimo oznaku <canvas>. Uz ovu oznaku se zadaju i parametri width i height koji označavaju širinu i visinu u pikselima - isto kao za elemenat <img>. Ova dva parametra nisu obavezna i ako se ne navedu, podrazumevana širina će biti 300px, a visina 150px.
Iako ne deluje logično, oznaka <canvas> je dvostuka - mora imati i deo za zatvaranje. Unutar oznake se može navesti tekst koji se prikazuje u web čitačima koji nemaju mogućnost rada sa Canvasom.
<canvas> Tekst </canvas>
<canvas width="450" height="300"> Tekst </canvas>
Glavni razlog zbog koga nismo obrađivali Canvas u okviru HTML-a, je taj što u "čistom" HTML-u, Canvas sam po sebi ništa ne znači. Na web stranici se pojavi kao jedan običan, prazan (providan) pravougaonik. Svoju pravu snagu pokazuje tek kada počnemo da crtamo po njemu, a za to smo morali da savladamo i programiranje u JavaScriptu.
Režimi crtanja i Canvas
Kada se radi sa kompjuterskom animacijom, obično se razlikuju dva režima iscrtavanja:
- direktni (immediate mode)
- indirektni (retained mode)
Indirektni režim je režim visokog nivoa. Na taj način se vrši iscrtavanje u npr. SVG grafici. SVG grafika sadrži podatke o svim elementima iz kojih se sastoji slika (recimo krugovi, kvadrati i drugi oblici) i kada se jedan od tih elemenata promeni (promenimo veličinu i boju jednog od oblika), web čitač automatski iscrtava sve oblike, kako bi prikazao tu promenu. Ovde ne moramo da se brinemo o ostalim elementima - web čitač to radi umesto nas.
Sa druge strane, direktni režim podrazumeva niži nivo crtanja. Ovde ne postoje unapred pripremljeni "elementi" slike, već programer mora da se pobrine za celokupno iscrtavanje svakog frejma (frame - pojedinačna sličica u animaciji).
Canvas nam omogućava rad u direktnom režimu. Ovo je naravno mnogo teže, ali nam pruža daleko veću kontrolu i mogućnosti.
Canvas i CSS
Na Canvas, kao i na druge HTML elemente možemo primeniti CSS formatiranje. Tako ga možemo pozicionirati, dodavati mu margine, okvir, senku i sl. Doduše, nema puno smisla podešavati mu boju i veličinu slova.
Ono što nas najviše interesuje je šta se dešava kada preko CSS-a takođe zadamo dimenzije, (širinu i visinu). Treba da zapamtimo sledeće - Canvas uvek fizički ima one dimenzije koje mu određuje oznaka <canvas>. Dimenzije koje zadamo u CSS-u, neće zaista povećati ili smanjiti Canvas, već će ga "deformisati" - Canvas će na stranici izgledati onako kako zadamo u CSS-u, ali broj puksela iz kojih se zaista sastoji se neće promeniti.
Primer
Zadaćemo Canvas veličine 100x100, ali ćemo u CSS stilu da zadamo dimenzije 300x150.
<canvas width="100" height="100" style="border:2px solid #900; width:300px; height:150px;"></canvas>
Pogledajte šta se dogodilo (zadali smo i CSS border da bi se Canvas video) - Canvas zaista na stranici zauzima prostor 300x150 (kao što je zadato u CSS-u), međutim i dalje ima prvobitnih 100x100 tačkica - samo je "razvučen" u prikazu.
- Fulton S., Fulton J. (2013): HTML5 Canvas, 2nd.ed, O'Reilly Media Inc., Sebastopol, CA