Почетак рада са canvas у JavaScript-у

Canvas је специјално поље за цртање у прегледачу помоћу JavaScript-а. Ово поље се прави помоћу тага <canvas>, коме треба навести ширину и висину:

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

За рад са овим пољем у JavaScript-у, за почетак, да се добије референца на овај таг у неку променљиву:

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

Затим на ову променљиву потребно је применити метод getContext:

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

Може се поједноставити:

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

Као резултат у променљиву ctx уписаће се објекат који садржи у себи такозвани контекст извршавања. Сво цртање ће се обављати помоћу метода овог објекта. Њиховим проучавањем ћемо се и бавити у следећим лекцијама.