<canvas id="my-canvas" height="500px" width="650px">

let myCanvas = document.getElementById('my-canvas');

let ctx = myCanvas.getContext('2d');

let myRadGrad = ctx.createRadialGradient(175,175, 150, 350, 350, 150);
myRadGrad.addColorStop(0,'blue');

myRadGrad.addColorStop(0.1,'darkblue');
myRadGrad.addColorStop(0.25, 'blue');
myRadGrad.addColorStop(0.5, 'green');
myRadGrad.addColorStop(0.75, 'lightgreen');
myRadGrad.addColorStop(1.0, 'yellow');

ctx.fillStyle = myRadGrad;
ctx.strokeStyle = 'red';
ctx.lineWidth = 3;
ctx.beginPath();
ctx.arc(175, 175, 135, 0, Math.PI* 2, true);
ctx.stroke();
ctx.fill();