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

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

for (var i=-500; i<canvas.height; i+=10) {

var cpx = canvas.width/2;
var cpy = i;
var R = (i/canvas.height) * 255;

context.beginPath();
context.moveTo(0,canvas.height);
context.quadraticCurveTo(cpx, cpy, canvas.width, canvas.height);
context.strokeStyle = "rgba("+R+",0,255,0.8)";
context.lineWidth = 2;
context.stroke();
context.closePath()

}

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

};

</script>