Aloittaminen canvasin kanssa JavaScriptissä

Canvas on erityinen piirtokenttä selaimessa JavaScriptillä. Tämä kenttä tehdään käyttämällä tagia <canvas>, jolle tulee määrittää leveys ja korkeus:

html<canvas width="200" height="200"></canvas>

Työskennelläksesi tämän kentän kanssa JavaScriptissä saamme aluksi viittauksen tähän tagiin johonkin muuttujaan:

javascriptlet canvas = document.querySelector('canvas');

Sitten tälle muuttujalle on sovellettava metodia getContext:

javascriptlet canvas = document.querySelector('canvas');
let ctx    = canvas.getContext('2d');

Voidaan yksinkertaistaa:

javascriptlet ctx = document.querySelector('canvas').getContext('2d');

Tuloksena muuttujaan ctx tallentuu objekti, joka sisältää niin kutsutun suorituskontekstin. Kaikki piirtäminen tapahtuu tämän objektin metodien avulla. Niiden opiskeluun ryhdymme seuraavissa oppitunneissa.