Canvas-elementti

Canvas-elementti on HTML5-päivityksen mukana tullut ominaisuus, jota käytetään grafiikoiden piirtämiseen verkkosivuille JavaScriptin avulla^[1]. Canvas mahdollistaa vektoripohjaisten grafiikoiden ja animaatioiden luomisen suoraan verkkosivulle ilman erillisiä lisäosia. Canvas-elementti on erityisen hyödyllinen interaktiivisten sovellusten, kuten pelien, visualisointien ja piirto-ohjelmien kehittämisessä.

Perusominaisuudet

Canvas-elementti määritellään HTML5-dokumentissa <canvas>-tagilla, johon voi liittää leveys- ja korkeusarvot. Oletusarvoisesti canvas on 300 pikseliä leveä ja 150 pikseliä korkea, mutta sen kokoa voidaan muokata tarpeen mukaan^[2].

Esimerkki canvas-elementin luonnista:

<canvas id="minunCanvas" width="500" height="400"></canvas>

Piirtäminen canvakselle

Canvas-elementin sisältöä voidaan hallita JavaScriptin avulla. Piirtäminen alkaa viittaamalla canvas-elementtiin ja sen 2D-piirtokontekstiin:

var canvas = document.getElementById('minunCanvas');
var context = canvas.getContext('2d');

Tämän jälkeen kontekstia voidaan käyttää erilaisten piirto-operaatioiden suorittamiseen, kuten suorakulmioiden, ympyröiden ja viivojen piirtämiseen sekä kuvien renderöintiin.

Esimerkkinä punaisen suorakulmion piirtäminen:

context.fillStyle = "#FF0000";
context.fillRect(30, 30, 50, 50);

Edistyneet ominaisuudet

Canvas tukee myös edistyneempiä grafiikkatekniikoita, kuten liukuvärejä, kuvioita, muunnoksia ja kompositointia. Lisäksi canvaksen sisältöä voidaan muokata pikselitasolla, mikä mahdollistaa monimutkaiset kuvanmuokkaustoiminnot.

Esimerkkinä, kuinka piirretään canvakselle 500x400 pikselin sinisen ympyrän vihreällä reunuksella:

context.beginPath();
context.arc(250, 200, 100, 0, 2 * Math.PI, false); // x, y, säde, alkukulma, loppukulma
context.fillStyle = 'blue';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();

Yhteensopivuus ja suorituskyky

Canvas-elementtiä tukevat kaikki modernit selaimet, kuten Google Chrome, Firefox, Safari, Opera ja Microsoft Edge^[2]. Suorituskyky on yleensä hyvä, mutta monimutkaisissa animaatioissa ja suurilla piirtomäärillä on suositeltavaa optimoida koodia ja käyttää tehokkaita piirtoalgoritmeja^[3].