HTML 캔버스 : 분리 된 원 그리기

Question

다음과 같은 레이아웃으로 캔버스에 원을 그려야했습니다. 캔버스 중앙의 원과 캔버스의 네 모서리 중간 지점에있는 네 개의 원. 여기에 코드를 입력했습니다 jsfiddle. 원은 렌더링되지만, 둘 사이에 여러 개의 채워진 경로가 있으므로 병합 된 혼란이 발생합니다.

나는 어떻게 제거 할

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

를 사용하여 모든 원을 그리는거야?

편집 : 원이 연결되지 않도록

Answer 1

.

이 같은

뭔가 작업을해야

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

Answer 2

jsfiddle 각 원 호형 후 closePath을 넣어 작업 : 당신은 아마 각 호의 후 입력하고자하는

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

ctx.closePath();