Početak rada sa canvas-om u JavaScript-u

Canvas je specijalno polje za crtanje u brauzeru pomoću JavaScript-a. Ovo polje se pravi pomoću taga <canvas>, kojem treba navesti širinu i visinu:

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

Za rad sa ovim poljem u JavaScript-u, prvo ćemo dobiti referencu na ovaj tag u neku promenljivu:

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

Zatim na ovu promenljivu je potrebno primeniti metodu getContext:

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

Može se pojednostaviti:

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

Kao rezultat, u promenljivu ctx biće upisan objekat koji u sebi sadrži takozvani kontekst izvršenja. Svo crtanje će se vršiti pomoću metoda ovog objekta. Proučavanjem istih i bavićemo se u narednim lekcijama.