Gradient di HTML5

Hari ini belajar mewarnai objek di HTML5, dan warnanya gradientfill.
Setelah beberapa kali mencoba, akhirnya berhasil juga.

Googling dulu, terus dapet ini nih:
http://www.nixtu.info/2010/07/html5-canvas-gradients-radial-gradient.html
http://www.imajine.in/tutorials/html5/canvas.aspx
http://stackoverflow.com/questions/8793414/how-can-i-make-the-gradient-stops-in-a-css3-linear-gradient
http://en.wikibooks.org/wiki/Cascading_Style_Sheets/Color



routine programnya:

for(var i=0;i<3;i++){
ctx.save();
ctx.beginPath();
ctx.arc(ArrTitik[i].x, ArrTitik[i].y, RadiusCircle, (Math.PI/180)*0, (Math.PI/180)*360, false);
// create radial gradient
//var grdRadial=context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius);
//grdRadial.addColorStop(offset, color);
//rgba(0-255, 0-255, 0-255, alpha) 
var grdRadial = ctx.createRadialGradient(ArrTitik[i].x,ArrTitik[i].y, 0, ArrTitik[i].x,ArrTitik[i].y, 360);
grdRadial.addColorStop(0, 'rgba(255, 50, 50, 0.5)');
grdRadial.addColorStop(0.1, 'rgba(255, 50, 50, 0)');
ctx.fillStyle = grdRadial;
ctx.fill();
ctx.closePath();
ctx.restore();
}


Program di atas, untuk membuat 3 buah titik yang gradient.
Hasilnya:

Alhamdulillah berhasil :)