CODEWITHSUNDEEP
javascripthtmlcanvas
darkryder
darkryder

Reputation: 832

HTML canvas: drawing separated circles

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

Upvotes: 0

Views: 152

Answers (2)

EvilZebra
EvilZebra

Reputation: 1072

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();
}

Upvotes: 1

markE
markE

Reputation: 105015

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();

Upvotes: 2

Related Questions