JavaScript-ში canvas-თან მუშაობის დაწყება

Canvas არის სპეციალური ველი ხატვისთვის ბრაუზერში 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 ჩაიწერება ობიექტი, რომელიც შეიცავს თავის თავში შესრულების კონტექსტს. მთელი ხატვა მოხდება ამ ობიექტის მეთოდების საშუალებით. მათ შესწავლას ჩვენ მომდევნო გაკვეთილებში მივუძღვნით თავს.