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

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

for (var i=0; i<100; 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 - 50;
var y1 = y - 50;
var x2 = x + 50;
var y2 = y + 50;

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);

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

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

}

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

};

</script>