HTML5 Canvas

Osnovni princip umetanja slike u CANVAS

Pri umetanju slike u HTML dokument koristi se IMG tag u kojem se jednostavno definira SRC atribut. U CANVASu to nije dovoljno, nego se mora prvo kreirati javascript objekt imgObj , koji se nakon toga pomoću metode drawImage(imgObj, x, y) umeće u CANVAS.
Osim same slike u CANVAS se može umetati video ili pak neki drugi CANVAS element. Pri umetanju videa u canvasu će biti prikazan statični frame videa, dakle screenshoot videa.

Umetanje

1. slike koja je već učitana u HTML dokument

Potrebno je prvo u HTMl dokumentu napisati IMG tag, a zatim mu pristupiti sa:
document.images, document.getElementsByTagName() ili document.getElementById()
Nakon toga se objekt slike ubacuje u CANVAS sa drawImage(imgObj, x, y).

Primjer: vidi primjer » vidi code

2. slike koja je na drugoj domeni

Za umetanje slike na drugoj domeni potrebno je prvo kreirati prazan slikovni objekt sa new Image(). Nakon što se src svojstvu definira URL put do fajla (slike), pomoću drawImage(imgObj, x, y) ubacuje se slikovni objekt u CANVAS.
Veoma je važno da se upotrijebi onload event kako bi slika bila učitana u dokument prije nego li se započne umetanje u CANVAS. To se može učiniti na dva načina prikazana dolje:

Slika sa druge domene: vidi primjer » vidi code

Osim sa druge domene može se na isti način učitati i slika na istoj domeni, ali bez upotrebe IMG taga.

Slika sa iste domene: vidi primjer » vidi code
Napomena: Ovdje je za sliku upotrijebljen animirani GIF.

3. slike pomoću data: URL-a

Manje slike se mogu se umetati pomoću data: protokola. Iako nije zaživio kao standard podržava ga većina browsera.

  <img width="16"
          height="16"
          alt="star"
          src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6Qdv
          CchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
          AAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqN
          KToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0S
          lBCBMQiB0UjIQA7" >

Primjer data : vidi primjer » vidi code

4. drugi CANVAS element

Moguće je prvo nacratati nešto u jedan CANVAS, a potom ga umetnuti u drugi CANVAS. Ako ne želimo da prvi canvas bude prikazan može se upotrijebiti createElement('canvas') metoda.

Primjer data : vidi primjer » vidi code

5. videa

Postoje dva načina. Prvi je da se definira VIDEO tag u HTML dokumentu nakon čega mu se u JS pristupa sa document.getElementById(). Tako se stvara objekt koji se pomoću drawImage(imgObj, x, y) umeće u CANVAS.
Također je važno upotrijebiti canplay event jer je potrebno da video bude učitan prije nego što se umetne u CANVAS.

Primjer - <video ... >: vidi primjer » vidi code

Drugi način je da se prvo kreira objekt pomoću createElement('video') metode te zatim da se u src svojstvu definira URL put do videa.
Nakon toga se taj objekt umeće u CANVAS sa drawImage(imgObj, x, y).

Primjer - createElement('video'): vidi primjer » vidi code

Važno je napomenuti da se ne ubacuje cijeli video u canvas već samo određeni frame tog videa, dakle statična slika.

Razni oblici metode drawImage()

Ova metoda može imati različiti broj argumanata, pa se može koristiti na razne načine.

1. Translacija: drawImage(imgObj, x,y)

Ovo je najjednostavniji oblik koji umeće slikovni objekt imgObj i translatira na koordinate x,y.

Primjer: vidi primjer » vidi code

2. Rotacija: drawImage(imgObj, x,y) i rotate(rad)

Rotacija slike se ustvari postiže rotacijom canvas-a tj. rotate() metodom .

Primjer - rotate(30 * TO_RADIANS): vidi primjer » vidi code

3. Scaling: drawImage(imgObj, x,y, width,height)

Promjena veličine slike može se postići dodavanje width,height argumenata. Mogu se upotrijebiti img.width i img.height svojstva slike.

Primjer - rotate(30 * TO_RADIANS): vidi primjer » vidi code

4. Slicing/Croping: (imgObj, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

Ovaj oblik se koristi za izrezivanje dijela slike i umetanje u CANVAS.
sx,sy, sWidth,sHeight - definiraju pravokutnik izrezivanja source slike
dx,dy, dWidth,dHeight - definiraju pravokutnik unutar CANVASa u koji će se umetati izrezana slika

Primjer - izrezivanje slike: vidi primjer » vidi code