Začetek dela s canvas v JavaScript

Canvas je posebno risalno polje v brskalniku v JavaScript. To polje naredimo s pomočjo oznake <canvas>, ki ji je treba nastaviti širino in višino:

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

Za delo s tem poljem v JavaScript za začetek pridobimo referenco na to oznako v neko spremenljivko:

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

Nato je treba na to spremenljivko uporabiti metodo getContext:

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

Lahko poenostavimo:

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

Kot rezultat se bo v spremenljivko ctx zapisal objekt, ki vsebuje tako imenovani kontekst izvajanja. Vse risanje bo potekalo s pomočjo metod tega objekta. Z njihovim preučevanjem se bomo ukvarjali v naslednjih lekcijah.