HTML canvas: рисование выделенных кругов

Question

Я хотел нарисовать несколько кругов на холсте со следующим макетом: круг прямо в центре холста и четыре круга в середине четырех краев холста. Я поставил свой код здесь jsfiddle. Круги визуализируются, однако между ними также есть несколько заполненных путей, что приводит к объединенному беспорядку.

Я рисую все круги с помощью

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

Как удалить их?

EDIT: работа jsfiddle

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

Положите closePath после каждой дугообразной так, что круги не связаны:

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

ctx.closePath();