Mengenal Method Fill di Canvas HTML5

Canvas merupakan salah satu fitur yang paling menarik di HTML5. Fitur ini dapat digunakan oleh para web designer untuk menggambar langsung di website. Disini saya akan membahas mengenai method fill dalam penggunaan canvas di HTML 5. Pada kasus ini saya akan membuat contoh bagaimana mewarnai objeck sederhana dengan method Fill. Method fill() adalah fungsi yang memerintahkan untuk mengisi warna pada object berupa lingkaran, persegi atau poligon. Method ini memerlukan sebuah property yang lain yaitu fillStyle yang bernilai warna. Berbeda dengan property strokeStyle yang berfungsi untuk mewarna stroke atau garis.
Pertama kita buat elemen canvas dengan lebar dan tinggi sebagai berikut

Berikut di bawah ini adalah script bagaimana mengisi warna pada objeck dan untuk mewarna stroke atau garis pada object hanya menggunakan method dan property khusus untuk Canvas HTML5.

document.getElementById('Kotak') ini harus sama dengan attribute id pada elemen canvas. Maka akan terlihat sebuah objek kotak berwarna biru dan terdapat garis berwarna merah

Selamat Mencoba.