Canvas

HTMLCanvasElement
Piirtäminen Canvakselle
CanvasRenderingContext2D
Lisätietoa

canvas-elementti on tarkoitettu pelkästään piirtoalustaksi. Piirtämisen voi tehdä javascriptilla joko Canvas API tai WEBGL-rajapinnan kautta.

<canvas width="100" height="100" >Vaihtoehtoinen sisältö</canvas>

canvas-elementin koon voi määritellä CSS:llä (missä tahansa CSS-yksiköissä) tai suoraan html-attribuutteina (vain pikseleinä). CSS:llä kokoa muuttaessa myös canvaksen mahdollinen sisältö skaalataan automaattisesti uuteen kokoon.

Canvas ei voi olla äärettömän kokoinen. Eri selaimille on erilaiset maksimikoot. Yleensä kokoa 16384x16384 ei kannata ylittää.

HTMLCanvasElement

HTMLCanvasElement tuntee seuraavat ominaisuudet:

height
width

HTMLCanvasElement tuntee seuraavat metodit:

Piirtäminen Canvakselle

Käytä DOM-puussa jo olemassa olevaa canvas-elementtiä

<canvas id="canvas"></canvas>

tai luo sellainen dynaamisesti

const canvas = document.getElementById("canvas");
//const canvas = document.createElement("canvas");
//document.body.appendChild(canvas);

Varsinaiseen piirtämiseen käytetään CanvasRenderingContext2D-rajapintaa.

const ctx = canvas.getContext('2d');

Piirretään punainen suorakaide, jonka vasen yläkulma on canvaksen vasemmassa yläkulmassa koordinaateissa (0,0). Suorakaiteen leveys on 150 ja korkeus on 100.
```
ctx.fillStyle = "#ff0000";
ctx.fillRect(0, 0, 150, 200);
```
Canvakselle piirretty kuva on tavallinen bittikarttakuva. Canvaksen sisällöstä ei pysty jälkikäteen erottelemaan sille piirrettyjä objekteja. Canvas säilyttää sisältönsä (retained mode) eikä edellytä kaiken piirtämistä jatkuvasti uudelleen kuten esim. Windows Forms -rajapinnassa (immediate mode). Kts. Retained Mode Versus Immediate Mode
Koska Canvas on vain bittikarttakuva ei Canvaksen sisältöä voi animoida CSS:n avulla. Koko Canvas-elementtiä voi kuitenkin CSS-animoida esim. muuttamalla sen kokoa tai vaihtamalla sen sijaintia. Jos haluaa animoida canvaksen sisältöä on pakko käyttää javascriptia ja piirtää requestAnimationFrame-metodin avulla koko canvas tai osa canvaksesta uudelleen ja uudelleen. Älä käytä javascript-animointiin timereita!

CanvasRenderingContext2D

CanvasRenderingContext2D tarjoaa rajapinnan varsinaiseen piirtämiseen. Kaikki metodit käsitellään MDN:n CanvasRenderingContext2D-sivulla. Tässä käydään läpi vain olennaisimmat metodit ja ominaisuudet:

Lisätietoa

Käyttäjien kommentit