Teorijski dio seminara

Osnovi podaci o canvasu

1. Canvas ima samo dvije dimenzije
2. Koordinate u gornjem lijevom kutu su (0,0)
3. getContext() metoda vraća objekt koji posjeduje metode i varijable za crtanje
4. Canvas je samo okvir, a crta se pomoću javascripta

Osnovi primjer korištenja canvasa

U ovom primjeru možemo vidjeti canvas element koji je veličine 300px*300px te u njemu iscrtavamo objekte. Ukoliko želimo vidjeti dimenzije canvasa moramo podesiti obrub i boju canvasa jer se u protivnom neće vidjeti dimenzije canvasa.

 
var c = document.getElementById("canvas");// služi za pronalazak canvas elementa u DOM-u
var ctx = c.getContext("2d");// canvas context je ugrađen u HTML5 canvas objekt te sadrži metode potrebne za crtanje
ctx.fillStyle = "#FF0000";//postavljanje css boje, pattern-a, ili gradienta
ctx.fillRect(0,0,150,75);// fillRect(x,y,width,height), služi za crtanje pravokutnika