Начало работа с 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 ще се запише обект, съдържащ в себе си така наречения контекст на изпълнение. Цялото рисуване ще се извършва с помощта на методите на този обект. С тяхното изучаване ще се заемем в следващите уроци.