Membuat Gradiasi Canvas HTML5

Dalam menerapkan warna objek terdapat dua jenis yaitu Linear Gradient dan Radial Gradient. Linear Gradient adalah gradiasi yang berbentuk lurus dan dapat di buat dengan perintah createLinearGradient() sedangkan Radial Gradients merupakan gradiasi yang berbentuk melingkar yang dibuat dengan menggunakan perintah createRadialGradient(). Gradien dapat kita digunakan untuk mengisi warna pada persegi panjang, lingkaran, garis, dan teks.
Pada kesempatan kali ini saya akan menciptakan sebuah linier gradien dengan html5 kanvas. Langsung saja Pertama kita buat elemen canvas terlebih dahulu dan berikan lebar dan tinggi sebagai berikut

Untuk menambahkan warna dalam gradasi, kita dapat melakukan perintah addColorStop() .

Agar lebih jelasnya, cobalah ketikkan script dibawah ini.

Hasilnya sebagai berikut

Jadi warna pada kanvas tidak terbatas pada warna solid tetapi kita juga dapat menggunakan dua warna sekaligus, saya sudah memberikan warna biru muda yang berasal dari titik awal dan biru gelap berasal dari titik akhir.

Semoga Bermanfaat..