Започнување со работа со 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 ќе се запише објект кој содржи во себе таканаречен контекст на извршување. Сите цртања ќе се случуваат со помош на методите на овој објект. Нивното проучување ќе го започнеме во следните лекции.