Cara Membuat Obyek Shadow dengan Canvas

Pada tutorial sebelumnya telah dibahas bagaimana cara menampilkan gambar dengan menggunakan canvas HTML5. Hari ini saya akan mengajarkan membuat obyek shadow pada canvas. Seperti yang sudah dijelaskan canvas merupakan wadah atau tempat untuk menggambar suatu obyek pada halaman web. Obyek yang akan dibuat merupakan obyek sederhana berupa rectangle yang akan diberi efek shadow. Perhatikan script canvas berikut :

See the Pen Fqsde by Dumet_School (@dumet_school) on CodePen.

ctx.fillStyle = "#FF0000"  merupakan pengisian warna pada obyek. Untuk membuat shadow gunakan  ctx.shadowBlur=20 dan ctx.shadowColor="black" .  ctx.fillRect(100,20,100,80) merupakan ukuran dan jarak dari obyek.

Demikian tutorial ini semoga bermanfaat. Sampai bertemu di tutorial Canvas HTML5 selanjutnya.