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

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