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

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

//// BKGD

var grd = context.createRadialGradient(300, 280, 100, 300, 400, 250);
grd.addColorStop(0, "rgb(255,0,0)");
grd.addColorStop(0.3, "rgb(125,0,125)");
grd.addColorStop(1, "rgb(125,125,0)");

context.rect(0,0,canvas.width, canvas.height);
context.fillStyle = grd;
context.fill();

/// NEW SHAPE

context.beginPath();
context.moveTo(100,300);
context.quadraticCurveTo(400,0, 700,300);
context.quadraticCurveTo(400,600,100,300);
//grd = context.createRadialGradient(300, 400, 100, 300, 400, 250);
// COORDINATES OF INNER CIRCLE AND OUTER CIRCLE, THERE CAN BE AN OFFSET
// context.createRadialGradient(center1X, center1Y, innerRadius, center2X, center2Y, outerRadius);

grd = context.createRadialGradient(500, 400, 50, 400, 300, 250);

grd.addColorStop(0, "rgb(0,0,0)");
grd.addColorStop(0.25, "rgb(255,255,255)");
grd.addColorStop(0.5, "rgb(0,0,125)");
grd.addColorStop(1, "rgb(0,0,0)");

context.fillStyle = grd;
context.fill();

context.closePath();

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

};

</script>