JavaScript-da canvas bilan ishlashni boshlash

Canvas - bu brauzerda JavaScript yordamida chizish uchun maxsus maydon. Bu maydon <canvas> tegi yordamida yaratiladi, unga kenglik va balandlik ko'rsatilishi kerak:

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

JavaScriptda bu maydon bilan ishlash uchun avvalo, ushbu tegga havolani qandaydir o'zgaruvchiga olamiz:

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

Keyin, ushbu o'zgaruvchiga getContext metodini qo'llash kerak:

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

Soddalashtirish mumkin:

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

Natijada ctx o'zgaruvchisiga bajarish konteksti deb ataladigan obekt yoziladi. Chizishning barchasi ushbu obektning metodlari yordamida amalga oshiriladi. Ularni o'rganish bilan biz keyingi darslarda shug'ullanamiz.