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.

2 Maret 2015

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat