Darbo su canvas JavaScript pradžia

Canvas yra specialus piešimo laukas naršyklėje naudojant JavaScript. Šis laukas sukuriamas naudojant <canvas> tagą, kuriam reikia nurodyti plotį ir aukštį:

html<canvas width="200" height="200"></canvas>

Norint dirbti su šiuo lauku JavaScript, pirmiausia reikia gauti nuorodą į šį tagą į kokį nors kintamąjį:

javascriptlet canvas = document.querySelector('canvas');

Tada šiam kintamajam reikia pritaikyti metodą getContext:

javascriptlet canvas = document.querySelector('canvas');
let ctx    = canvas.getContext('2d');

Galima supaprastinti:

javascriptlet ctx = document.querySelector('canvas').getContext('2d');

Dėlto į kintamąjį ctx įrašomas objektas, kuriame yra vadinamasis vykdymo kontekstas. Visas piešimas vyks naudojant šio objekto metodus. Jų tyrimu mes ir užsiimsime kitose pamokose.