Bermula dengan Canvas dalam JavaScript

Canvas ialah medan khas untuk melukis dalam pelayar menggunakan JavaScript. Medan ini dibuat menggunakan tag <canvas>, yang mana lebar dan tinggi perlu dinyatakan:

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

Untuk bekerja dengan medan ini dalam JavaScript, pertama sekali dapatkan rujukan kepada tag ini dalam beberapa pembolehubah:

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

Kemudian, kaedah getContext perlu digunakan pada pembolehubah ini:

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

Boleh dipermudahkan:

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

Hasilnya, objek yang mengandungi apa yang dipanggil konteks pelaksanaan akan direkodkan ke dalam pembolehubah ctx. Semua lukisan akan dilakukan menggunakan kaedah objek ini. Kita akan mempelajarinya dalam pelajaran-pelajaran berikutnya.