Începând să lucrezi cu canvas în JavaScript

Canvas-ul este un câmp special pentru desenat în browser folosind JavaScript. Acest câmp este creat cu ajutorul tag-ului <canvas>, căruia îi trebuie specificată lățimea și înălțimea:

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

Pentru a lucra cu acest câmp în JavaScript, trebuie mai întâi să obținem o referință la acest tag într-o variabilă:

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

Apoi, acestei variabile trebuie să îi aplicăm metoda getContext:

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

Putem simplifica:

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

Ca rezultat, în variabila ctx se va scrie un obiect care conține așa-numitul context de execuție. Toate desenările vor avea loc cu ajutorul metodelor acestui obiect. Le vom studia în lecțiile următoare.