Membuat Bayangan Objek Canvas HTML5

<canvas> di HTML 5 merupakan element HTML5 yang digunakan untuk menggambar grafik, atau object di website dimana harus menggunakan fungsi dari javascript. Secara default canvas tidak meiliki border dan isi. Contohnya saya akan membuat sebuah objek bayangan di canvas HTML5. Pertama saya akan membuat elemen canvas terlebih dahulu seperti berikut

Untuk membuat bayangan objek kita dapat memberikan 4 perintah. Kodenya hampir sama ketika kita membuat efek bayangan pada CSS. Agar lebih jelasnya cobalah ketikkan script javascript dibawah ini.

shadowOffsetX digunakan untuk mengatur jarak bayangan dari objek secara horizontal.
shadowOffsetY digunakan untuk mengatur jarak bayangan dari objek secara vertikal.
shadowColor digunakan untuk mengatur warna bayangan.
shadowBlur digunakan untuk mengatur tingkat blur bayangan.

Script diatas Saya membuat sebuah objek persegi panjang dengan efek shadows yang telah ditentukan. Hasilnya sebagai berikut.

Selamat Mencoba.