Սկսենք աշխատել canvas-ի հետ JavaScript-ում

Կանվասը գծագրման հատուկ դաշտ է բրաուզերում՝ JavaScript-ի միջոցով: Այս դաշտը ստեղծվում է <canvas> թեգի միջոցով, որին պետք է նշել լայնությունն ու բարձրությունը.

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

Այս դաշտի հետ աշխատելու համար JavaScript-ում նախ պետք է ստանալ այդ թեգի հղումը ինչ-որ փոփոխականի մեջ.

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

Այնուհետև այս փոփոխականին անհրաժեշտ է կիրառել getContext մեթոդը.

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

Կարելի է պարզեցնել.

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

Արդյունքում ctx փոփոխականի մեջ կգրվի մի օբյեկտ, որն իր մեջ պարունակում է այսպես կոչված կատարման կոնտեքստ: Բոլոր գծագրությունները կկատարվեն այս օբյեկտի մեթոդների միջոցով: Դրանց ուսումնասիրությամբ մենք կզբաղվենք հաջորդ դասերում: