Objekat HTMLCanvasElement

Sam elemenat Canvas, nam pruža tek najosnovnije mogućnosti. Ipak, bez ovih svojstava i metoda ne bismo mogli ništa da uradimo!

width
height

Ovo su numerička svojstva pomoću kojih možemo da zadamo ili pročitamo dimenzije Canvasa.

Ne zaboravite da su ovo realne dimenzije Canvasa, koliko nam je piksela zaista na raspolaganju po horizontali i vertikali. U kojim dimenzijama će Canvas biti prikazan na stranici, zavisi od CSS atributa.

  // kompletno programsko kreiranje canvasa
  var c1 = document.createElement("canvas");
  c1.width = 400;
  c1.height = 250;
  document.getElementById("kont").appendChild(c1);
  
  // preuzimanja canvasa iz HTML-a
  var c2 = document.getElementById("crtez");
  
  // koordinate centra
  var x = c2.width / 2;
  var y = c2.height / 2;

getContext()

Metod getContext nas u stvari povezuje sa "površinom za crtanje" canvasa. Tek kada iz Canvas elementa "izvučemo" kontekst, možemo da crtamo. Zašto ova komplikacija? Stvar je u tome da po Canvasu možemo da crtamo na više različitih načina - korišćenjem 2D ili 3D grafike. Svaki od ovih načina je specifičan sam za sebe i zahteva sopstvene skupove svojstava i metoda.

Tip se zadaje kao string. Moguće vrednosti su:

• "2d" - klasičan način crtanja po površini
• "webgl" - 3D grafika korišćenjem WebGL standarda
• "webgl2" - 3D grafika korišćenjem WebGL v2 standarda (još uvek nije šire podržano)

Atributi označavaju dodatne opcije koje kontekt treba da podrži. Zadaju se kao JavaScript objekat, a koja će svojstva objekat imati, zavisi od tipa konteksta. Ovaj parametar nije obavezan. Atributi 2d konteksta za sada imaju samo jednu mogućnost:

• alpha - (false/true) - da li kontekst ima alfa kanal (mogućnost poluprovidnosti, ali i sporijeg crtanja)

Kontekst webgl ima više svojstava i sva su logičkog tipa, odnosno mogu im se zadati samo vrednosti true i false. Svojstva su:

• alpha - da li canvas ima alfa bafer (kanal za poluprovidnost)
• depth - da li pikseli imaju informaciju o dubini (minimum je 16 bita)
• stencil - da li postoji stencil bafer
• antialias - da li se vrši umekšavanje linija
• preserveDrawingBuffer - baferi (slika) se neće automatski brisati, već samo kada se zatraži

  // preuzimanja canvasa iz HTML-a
  var can = document.getElementById("crtez");
  
  var cgx = can.getContext("2d");  // uobičajeno
  var cgx = can.getContext("2d", {alpha:true});  // sa atributima
  
  // za 3D grafiku, sa atributima
  var cgx = can.getContext("webgl", {alpha:true, depth:true, antialias:false});

toDataURL()

Pomoću ovog metoda možemo "izvući" trenutnu sliku sa canvasa i to kodiranu u obliku teksta (MIME format). Zahvaljujući tome, možemo je npr. poslati na server ili ubaciti u običan img elemenat.

Parametar tip se zadaje kao string i predstavlja MIME tip slike ("image/png", "image/jpeg", "image/webp"...).

Parametar opcije predstavlja broj između 0 i 1 i u stavri označava kvalitet slike, ako je tip "image/jpeg" ili "image/webp".

Parametri nisu obavezni. Ako se ne navedu, podrazumeva se "image/png" format.

toBlob()

Sliku sa canvasa možemo "izvući" i u Blob objekat.

Ovaj metod ne vraća vrednost, ali mu se (obavezno) prosleđuje callback funkcija kojoj se onda kao parametar prosleđuje dobijeni Blob objekat. Parametri tip i opcije imaju isto značenje kao kod metoda toDataURL() i nisu obavezni.

  var can = document.getElementById("crtez");
  var cgx = can.getContext("2d");
  
  var dat = cgx.toDataURL();  // bez parametara - PNG slika
  var dat = cgx.toDataURL("image/jpeg", 0.8);  // JPG slika, kvaliteta 80%

  // kao rezultat se dobija slika u formi teksta, npr:
  // "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
  // blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
  
  // ako u HTML-u imamo npr. <img id="slika" ... />
  // ove podatke možemo "ubaciti" u nju
  document.getElementById("slika").src = dat;