This is because you are not closing the path, either using fill()
or closePath()
will close the path so it does not try and connect all the items. fill()
fills in the circles and closes the path so we can just use that. Also you need to use beginPath()
, so that they are separate from each other. Here is your three circles:
var coords = [ [150,50], [20,85], [160,95] ];
for(var i = 0; i < coords.length; i++){
ctx.beginPath();
ctx.arc(coords[i][0], coords[i][1], 5, 0, Math.PI * 2, true);
ctx.fill();
}
To not repeat a bunch of code and have unique coordinates store your X
and Y
position in an array and use a for
loop to go through it.
Update:
A more efficient way to do which achieves the same effect this would be to only use a single path and use moveTo()
instead of creating a new path when drawing each circle:
ctx.beginPath();
for(var i = 0; i < coords.length; i++){
ctx.moveTo(coords[i][0], coords[i][1]);
ctx.arc(coords[i][0], coords[i][1], 5, 0, Math.PI * 2, true);
}
ctx.fill();