<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start here

for (var i=0; i<500; i+=1) {

var x = canvas.width * Math.random();
var y = canvas.height * Math.random();
// var rad = i;
var rad = Math.random()*100;
var startA = 0;
var endA = Math.PI * 2;
var cw = true;
var x1 = x ;
var y1 = y ;
var x2 = x + i;
var y2 = y + i;

var R = Math.round(Math.random() * 255);
var G = Math.round(Math.random() * 255);
var B = Math.round(Math.random() * 255);

context.beginPath();

context.arc(x,y,rad,startA,endA,cw);

// var grd = context.createLinearGradient(x1,y1,x2,y2);
var grd = context.createRadialGradient(x1,y1,rad/5,x1,y1,rad);

grd.addColorStop(0, "rgba("+G+","+R+","+B+",0.3)");
grd.addColorStop(0.5, "rgba("+B+","+R+","+G+",0.6)");
grd.addColorStop(1, "rgba("+R+","+G+","+B+",1)");

context.fillStyle = grd;
context.fill();
//context.stroke();
context.closePath();

}

////////////////////////////////////// end here

};

</script>