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