Започнување со работа со canvas во JavaScript

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

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

За работа со ова поле во JavaScript, прво добијме референца до овој таг во некоја променлива:

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

Потоа на оваа променлива неопходно е да се примени методот getContext:

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

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

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

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