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

////////////////////////////////////// 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 ;
var y1 = y ;
var x2 = x + i;
var y2 = y + i;
var BZH1 = canvas.height*Math.random();
var BZH2 = canvas.height*Math.random();
var BZW1 = canvas.width*Math.random();
var BZW2 = canvas.width*Math.random();

var R1 = Math.round(Math.random() * 255);
var G1 = Math.round(Math.random() * 255);
var B1 = Math.round(Math.random() * 255);
var R2 = Math.round(Math.random() * 255);
var G2 = Math.round(Math.random() * 255);
var B2 = Math.round(Math.random() * 255);
var R3 = Math.round(Math.random() * 255);
var G3 = Math.round(Math.random() * 255);
var B3 = Math.round(Math.random() * 255);

context.beginPath();
context.moveTo(0,0);
context.bezierCurveTo(BZH1+i,BZW1+i,BZH2-i,BZW2-i,cheight,cwidth);
context.bezierCurveTo(BZH2+i,BZW2+i,BZH1-i,BZW1-i,0,0);
//context.arc(x,y,rad,startA,endA,cw);
var grd = context.createLinearGradient(0,0,cheight,cwidth);
//var grd = context.createRadialGradient(x1,y1,rad/5,x1,y1,rad);
grd.addColorStop(0, "rgba("+R3+","+G3+","+B3+",0.3)");
grd.addColorStop(0.5, "rgba("+R2+","+G2+","+B2+",0.6)");
grd.addColorStop(1, "rgba("+R1+","+G1+","+B1+",1)");

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

}

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

};

</script>