Issue with fill() method

Here is my JavaScript code:

function Show(output, startX, startY){
    var c = document开发者_运维问答.getElementById("myCanvas");
    var context = c.getContext("2d");
        context.arc(startX, startY, 3, 0, Math.PI*2, true);
        context.fill();
        context.arc(startX + 50, startY, 3, 0, Math.PI*2, true);
        context.stroke();
}
Show(outputcpu, 50, 50);
Show(outputio, 70, 50);

I have expect some thing like: o-o o-o.

But not sure why I get: o-o-o-o.

How to remove the center stroke? (I want to remove the second line o-o*-*o-o)

beginPath will seperate your calls: http://jsfiddle.net/CmuT7/1

var c = document.getElementById("myCanvas");
var context = c.getContext("2d");

function Show(output, startX, startY) {
    context.beginPath();
    context.arc(startX, startY, 3, 0, Math.PI * 2, true);
    context.fill();
    context.arc(startX + 50, startY, 3, 0, Math.PI * 2, true);
    context.stroke();

}
Show('', 50, 50);
Show('', 70, 70);

You need to use moveTo() or beginPath() function to avoind line between those arcs.

function Show(output, startX, startY){
    var c = document.getElementById("myCanvas");
    var context = c.getContext("2d");
        context.arc(startX, startY, 3, 0, Math.PI*2, true);
        context.fill();
        context.moveTo(startX +50, startY);
        context.arc(startX + 50, startY, 3, 0, Math.PI*2, true);
        context.stroke();
}
Show(outputcpu, 50, 50);
Show(outputio, 70, 50);