HTML canvas：绘制分开的圆圈

Question

I wanted to draw some circles on the canvas with the following layout: A circle right in the centre of the canvas and four circles at the mid points of the four edges of the canvas. I've put up my code here jsfiddle . The circles are rendered, however there are multiple filled paths between them too, resulting in an amalgamated mess.

I'm drawing all the circles by using

ctx.arc(points[i].x, points[i].y, radius, 0, 2 * Math.PI, true);

How do I remove them ?

EDIT: working jsfiddle

Answer 1

Put closePath after each circular-arc so that the circles are not connected:

ctx.arc(points[i].x, points[i].y, radius, 0, 2 * Math.PI, true);

ctx.closePath();

Answer 2

You are probably wanting to fill after each arc.

Something like this should work

ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, true);
ctx.fill();
for(var i = 0; i < points.length; i++){
    var _ = points[i];

    ctx.beginPath();
    ctx.arc(_.x, _.y, 25, 0, 2 * Math.PI, true);
    ctx.fill();
}