Начало работы с canvas в JavaScript

Канвас - это специальное поле для рисования в браузере на 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 запишется объект, содержащий в себе так называемый контекст выполнения. Все рисование будет происходить с помощью методов этого объекта. Их изучением мы и займемся в следующих уроках.