HTML5 <canvas> element omogućava nam pomoću JavaScripta crtanje različitih oblika, dodavanje slika, kreiranje animacija na web stranici.
Na platnu to ne radimo korištenjem novog jezika (kao što je to slučaj u SVG) ili korištenjem Flasha.
Želimo li crtati na platnu trebamo definirati element sa svojstvima visine i širine, dodati identifikator kako bi pristupili elementu putem JavaScripta:
<canvas width="800" height="600" id="canvas1">
</canvas>
fillRect() – crtanje popunjenih pravokutnika
strokeRect() – crtanje okvira oko pravokutnika
clearRect() – načini prazan, proziran pravokutni oblik
Boja ispune i obruba
<canvas> element crta samo crno-bijelo dok se ne definira boja ispune i boja obruba.
fillStyle – boja ispune
strokeStyle – boja obruba
function drawSquare() {
var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");
context.fillStyle="rgb(255,0,0)";
context.fillRect(100,100,300,300);
context.strokeRect(150,150,200,200);
context.clearRect(200,200,100,100);
}
beginPath() - metoda kreira putanju na platnu
closePath() - metoda povlači crtu između trenutne točke i polazne točke.
stroke() - crta obrub oko putanje
fill() - popunjava sadržaj unutar putanje
moveTo() - ne crta ništa nego pomiče točku crtanja na novo mjesto.
for (i=0; i<2*Math.PI; i=i+0.04)
{
context.beginPath();
context.moveTo(10+100*i,200);
context.lineTo(10+100*i,200-200*Math.sin(i));
context.closePath();
context.strokeStyle="blue";
context.stroke();
}
function drawSquare () {
i = 0;
window.setInterval(function() {
i = draw(i);
}, 10);
}
function draw(i) {
contxt.beginPath();
contxt.moveTo(200+100*Math.cos(i),200+100*Math.sin(i));
contxt.lineTo(200+100*Math.sin(i),200-100*Math.cos(i));
contxt.lineTo(200-100*Math.cos(i),200-100*Math.sin(i));
contxt.lineTo(200-100*Math.sin(i),200+100*Math.cos(i));
contxt.lineTo(200+100*Math.cos(i),200+100*Math.sin(i));
contxt.strokeStyle="rgb(0,255,0)";
contxt.stroke();
return(i+0.01); }