One side border to circle in canvas

Question

I have created the following type of circle with combining arc in canvas. It is created properly and looks good.

My Issue:

I have a black border around the arc which is on all four sides.

I want only the border that is on the outside of the circle. I do not want the inside border or borders between between the segments. I tried lots of things but they have not worked.

I have tried the following:

ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);

But didn't succeed. Hope I got good solution for that.

I have 3 other circle which are connected with each other(FYI).

var canvas = document.getElementById("canvas");

var startAngle = 0;

var ctx;
var canvas = document.getElementById("canvas");

var leftValue=250;
var topValue=150;	

drawWheel1();

function drawWheel1()
{
 	if(canvas.getContext)
	{
    	var outsideRadius = 120;
    	var textRadius = 97;
    	var insideRadius = 80;
		var arc = Math.PI / 6;
	 
    	ctx = canvas.getContext("2d");
   
		ctx.beginPath(); 
		ctx.fillStyle="#3D3D3D";
    	ctx.strokeStyle = "black";
    	ctx.lineWidth = 5;
		
    	for(var i = 0; i < 12; i++)
		{    			
			var angle = -(startAngle + i * arc);
      		ctx.fillStyle = "#029990";
     
      		ctx.beginPath();
      		ctx.arc(leftValue, topValue, outsideRadius, angle, angle + arc, false);
      		ctx.arc(leftValue, topValue, insideRadius, angle + arc, angle, true);
			ctx.stroke();
      		ctx.fill();
     
      		ctx.save();
      		      		
      		ctx.restore();
    	}           	
  	}
}

<canvas id="canvas" width="500" height="580"></canvas>

Answer 1

You can actually just draw two arcs and remove the loop. Below is a working, simplified version.

var ctx;
var canvas = document.getElementById("canvas");
var leftValue = 250;
var topValue = 150;	

drawWheel1();

function drawWheel1() {
    if(canvas.getContext) {
    	var outsideRadius = 120;
    	var insideRadius = 80;
        var arc = Math.PI * 2;
	 
        //Initialization
    	ctx = canvas.getContext("2d");
    	ctx.lineWidth = 5;
      
        //Draw the outer arc
      	ctx.beginPath();
    	ctx.strokeStyle = "black";
      	ctx.fillStyle = "#029990";
      	ctx.arc(leftValue, topValue, outsideRadius, 0, arc, false);     
        ctx.stroke();
      	ctx.fill();
        ctx.closePath();
      
        //Draw the inner arc
        ctx.beginPath();
    	ctx.strokeStyle = 'white';
        ctx.fillStyle = 'white';
        ctx.arc(leftValue, topValue, insideRadius, arc, 0, true);
        ctx.stroke();
      	ctx.fill();
        ctx.closePath();
    }
}

<canvas id="canvas" width="500" height="580"></canvas>

Answer 2

Make a new path and only stroke the new one like so.

var canvas = document.getElementById("canvas");

var startAngle = 0;

var ctx;
var canvas = document.getElementById("canvas");

var leftValue = 250;
var topValue = 150;

drawWheel1();

function drawWheel1() {
if (canvas.getContext) {
    var outsideRadius = 120;
    var textRadius = 97;
    var insideRadius = 80;
    var arc = Math.PI / 6;

    ctx = canvas.getContext("2d");

    ctx.beginPath();
    ctx.fillStyle = "#3D3D3D";
    ctx.strokeStyle = "black";
    ctx.lineWidth = 5;

    for (var i = 0; i < 12; i++) {

        var angle = -(startAngle + i * arc);
        ctx.fillStyle = "#029990";
        ctx.save();
        ctx.beginPath();
        ctx.arc(leftValue, topValue, outsideRadius, angle, angle + arc, false);
        ctx.arc(leftValue, topValue, insideRadius, angle + arc, angle, true);
        ctx.fill();
        ctx.closePath();
        // Close the old path

        // Begin a new path
        ctx.beginPath();
        // Create the arc path
        ctx.arc(leftValue, topValue, outsideRadius, angle, angle + arc, false);
        // Stroke it
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
    }
}
}

<canvas id="canvas" width="500" height="580"></canvas>