Why are the elements in the canvas not being filled with a gradient?

Question

JavaScript

Hello. There is a function that draws a specified number of circles

function drawCircle(count){
for(var i=0; i<circles.length; i++){
  context.beginPath();
  var circleOccupancy = 2 / 100 * (circles[i].count / circles[i].full * 100) * Math.PI;
  grd.addColorStop(0,"blue");
  grd.addColorStop(1,"red");
  context.strokeStyle = grd;
  context.lineWidth = 35;
  context.arc(centerX, centerY, radius, 0, circleOccupancy, false);
  context.stroke();
}
centerX+= canvas.width / (count * 2) * 2;
})

But for some reason the gradient only works on the first circle. The rest is just a color. Tell me, please, what is the problem? It seems there are no errors.