Memulai dengan canvas di JavaScript

Canvas adalah area menggambar khusus dalam browser menggunakan JavaScript. Area ini dibuat dengan menggunakan tag <canvas>, yang perlu ditentukan lebar dan tingginya:

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

Untuk bekerja dengan area ini di JavaScript, pertama-tama dapatkan referensi ke tag ini ke dalam suatu variabel:

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

Kemudian, ke variabel ini perlu diterapkan method getContext:

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

Bisa disederhanakan:

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

Hasilnya, ke dalam variabel ctx akan tercatat sebuah objek yang berisi yang disebut konteks eksekusi. Semua proses menggambar akan dilakukan dengan menggunakan method dari objek ini. Kita akan mempelajarinya dalam pelajaran-pelajaran berikutnya.