Mengenal Method Rect Canvas HTML5

Pertemuan kali ini saya akan membahas bagaimana cara membuat beberapa contoh dalam membentuk bidang 2 dimensi berupa kotak, lingkaran, poligon pada canvas HTML5. Contoh-contoh tersebut merupakan teknik dasar dalam membuat objek. Oke kita mulai membuat yang pertama buat sebuah elemen canvas sebagai berikut

Untuk membuat sebuah kotak kita hanya membutuhkan method rect(x, y, width, height) perhatikan perintah berikut untuk menampilkan garis pinggir kotak maka diperlukan stroke():

dan jika perintah tersebut dijalankan akan terbentuk objek kotak dengan garis merah sebagai berikut

Pada method rect parameter pertama dan kedua memposisi kan kotak dengan titik x = 10 dan y = 0 sedangkan parameter tiga dan empat menentukan lebar dan tinggi pada kotak. Pada method rect dan stroke bisa digantikan dengan sebuah method strokeRect(x, y, width, height). Perhatikan perintah tersebut.

Selain rect bisa pula menggunakan method fillRect(x, y, width, height) dengan default warnanya hitam. Untuk mengisi warna pada objek dan ditambahkan property fillStyle.

maka akan terlihat seperti berikut

Semoga Bermanfaat