You need to break the paths between the balls, either by calling beginPath()
and fill()
for each circle or by using moveTo()
to skip from one to the next without leaving a path.
context.beginPath();
context.arc(x,y,10,0,Math.PI*2,true);
context.fill();
context.beginPath();
context.arc(x_1,y_1,10,0,Math.PI*2,true);
context.fill();
context.beginPath();
context.arc(x_2,y_2,10,0,Math.PI*2,true);
context.fill();
context.beginPath();
context.arc(x_3,y_3,10,0,Math.PI*2,true);
context.fill();
Demo: http://jsfiddle.net/5Mj5U/
Improved demo: http://jsfiddle.net/7nJDV/