A canvas használatának megkezdése JavaScriptben

A canvas egy speciális rajzolási terület a böngészőben JavaScript segítségével. Ezt a területet a <canvas> tag segítségével készítjük el, amelynek meg kell adni a szélességét és magasságát:

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

Ahhoz, hogy ezen a területen JavaScript segítségével dolgozzunk, először szerezzen be egy hivatkozást erre a tagre egy változóba:

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

Ezután a getContext metódust kell alkalmazni erre a változóra:

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

Leegyszerűsíthető:

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

Ennek eredményeképpen a ctx változóba egy olyan objektum kerül, amely magában foglalja az úgynevezett végrehajtási kontextust. Minden rajzolás ezen objektum metódusai segítségével fog történni. Ezek tanulmányozásával foglalkozunk a következő leckékben.