Пачатак працы з 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 запiшацца аб'ект, які змяшчае ў сабе так званы кантэкст выканання. Усё маляванне будзе адбывацца з дапамогай метадаў гэтага аб'екта. Іх вывучэннем мы і займемся ў наступных уроках.