canvas multiple gradient

HTML

<canvas id="canvas1" width="500" height="500"></canvas>

JavaScript

var can = document.getElementById('canvas1');
var canvas= can.getContext('2d');

canvas.beginPath();
canvas.arc(350,400,100,0,2*Math.PI,false);
canvas.strokeStyle = 'lightblue';

var grad = canvas.createLinearGradient(0,110,100,330);  //(x0,y0) to (x1,y1)
grad.addColorStop(0,'red');
grad.addColorStop(1,'yellow');
canvas.fillStyle = grad;
canvas.fill();
canvas.stroke();

canvas.beginPath();
canvas.arc(340,140,100,0,2*Math.PI,false);
canvas.strokeStyle = 'lightblue';

var grad = canvas.createLinearGradient(340,140,360,160);  //(x0,y0) to (x1,y1)
grad.addColorStop(0,'red');
grad.addColorStop(1,'yellow');
canvas.fillStyle = grad;
canvas.fill();
canvas.stroke();