Element <canvas> </canvas> je container unutar kojeg Javascript obavlja crtanje ili animaciju. Canvas područje je pravokutnog oblika te je predefinirano 300x150px. Ukoliko želimo izmijeniti veličinu canvas pravokutnika to ćemo učiniti sa width i height atributima ili sa CSS-om.
Primjer isprobajte u različitim browserima: vidi primjer » vidi code
Koordinatni sistem
Ishodište koordinatnog sustava je gornji-lijevi kut canvas pravokutnika. Horizontalno je os x, a vertikalno je os y kao na slici dolje. U javascript code-u prvo navodimo x, a zatim y koordinatu, npr. (x,y)
Atributi CANVAS taga
Osim globalnih atributa mogu se upotrijebiti još width i height atributi koji određuju dimenzije kvadrata u koji će biti smještena CANVAS grafika. Tu CANVAS grafiku će, kao što smo već ranije napomenuli, generirati Javascript code.
Alternativni tekst ili statična slika
Text unutar CANVAS taga je alternativan i prikazuje se samo ako je browser stariji i ne podržava ovaj element.
Umjesto alternativnog teksta unutar CANVAS taga može se staviti statična slika koja će se prikazati
u starijim browserima. Ta slika treba biti ista kao u CANVAS elementu i istih dimenzija.
Drawing Context
Pomoću Javascript document.getElementById pristupa se DOM canvas objektu.
Nakon toga se taj canvas objekt pomoću metode getContext("2d") stavlja u 2D kontekst.
Osim 2D konteksta postoji i 3D kontekst kao npr. WebGL, OpenGL.
<html>
<head>
<title>Simple Canvas</title>
<script type="text/javascript">
function init() {
var can = document.getElementById("kan1");
var ctx = can.getContext("2d");
}
</script>
</head>
<body onload="init()">
<canvas id="kan1" height="300" width="400">
</canvas>
</body>
</html>
- document.getElementsByTagName
- document.getElementsByClassName
- document.getElementsByName
- document.querySelectorAll
Save i Restore context
Kontekst je objekt u koji se spremaju (save) i vraćaju nazad (restore) postavke.
save() - metoda koja sprema postavke
restore() - metoda koja vraća prethodno spremljene postavke
Primjer: vidi primjer » vidi code
Pozivanje sa onload event-om
Vrlo dobra praksa je napisati code tako da se prvo učitaju svi HTML elementi web stranice, a tek nakon toga da Javascript crta unutar canvas tag.
To se može postići na više načina:
1. <body onload="crtaj()"> - u BODY tag se stavlja onload atribut koji poziva javascript funkciju nakon što se učita sve unutar BODY taga
Primjer: vidi primjer » vidi code
2. window.onload=function(){ ...JS code... } - u SCRIPT tag se stavlja window.onload event koji poziva javascript funkciju nakon što se učitaju svi HTML elementi unutar prozora
Primjer: vidi primjer » vidi code
3. function crtaj(){ ...JS code... }
window.onload=crtaj; - u SCRIPT tag se prvo definira funkcija crtaj() nakon čega se stavlja window.onload=crtaj koji poziva javascript funkciju nakon što se učitaju svi HTML elementi unutar prozora
Primjer: vidi primjer » vidi code
IF getContext
Također je dobra praksa da prije nego li Javascript započne sa crtanjem da ispita da li je unutar tog elementa uopće moguće crtati. Odnosno da li browser podržava CANVAS tag.
<!DOCTYPE HTML>
<html lang="hr">
<head>
<meta charset="UTF-8">
<title>CANVAS</title>
<script>
function crtaj() {
var can = document.getElementById("kan1");
if(can.getContext){
var ctx = can.getContext("2d");
//... code ovdje ...
}
window.onload=crtaj;
</script>
</head>
<body>
<canvas id="kan1" width="300" height="200" style="border:1px solid #DDDDDD;">
Vaš browser ne podržava CANVAS element!
</canvas>
<br><br>
</body>
</html>
Primjer - getContext: vidi primjer » vidi code
Dimenzije CANVASa
Dimenzije canvasa su širina i visina canvas pravokutnika, a pristupa im se sa
document.getElementById("canvasID").width i document.getElementById("canvasID").height.
Primjer - width, height: vidi primjer » vidi code