Draw Line Start From The Center Of Each Sector In Donut Chart?

I need your help , I have the following donut chart which I drawn using canvas this is the code I used to draw it

var midAngle = (radianAngle2 - radianAngle1)/2;

var x = centerX + radius * Math.cos( midAngle );

var y = centerY + radius * Math.sin( midAngle );

So this is how to draw lines from the center to the midpoints of each of your arcs:

varPI2=Math.PI*2;
accumPt=0;
for(var i=0;i<data.parts.pt.length;i++){
    var pt=data.parts.pt[i];
    var midPt=accumPt+pt/2;
    var midAngle=PI2*midPt/100;
    console.log(i,pt,midPt);
    accumPt+=pt;
    var x=150+100*Math.cos(midAngle);
    var y=150+100*Math.sin(midAngle);
    chart.save();
    chart.beginPath();
    chart.moveTo(150,150);
    chart.lineTo(x,y);
    chart.lineWidth=3;
    chart.strokeStyle="black";
    chart.stroke();
    chart.restore();
}

Here's example code and a Demo

var canvas = document.getElementById("canvas");
var chart = canvas.getContext("2d");

functiondrawdountChart(canvas) {

    this.x, this.y, this.radius, this.lineWidth, this.strockStyle, this.from, this.to = null;
    this.set = function (x, y, radius, from, to, lineWidth, strockStyle) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.from = from;
        this.to = to;
        this.lineWidth = lineWidth;
        this.strockStyle = strockStyle;
    }

    this.draw = function (data) {
        canvas.beginPath();
        canvas.lineWidth = this.lineWidth;
        canvas.strokeStyle = this.strockStyle;
        canvas.arc(this.x, this.y, this.radius, this.from, this.to);
        canvas.stroke();
        var numberOfParts = data.numberOfParts;
        var parts = data.parts.pt;
        var colors = data.colors.cs;
        var artPercentage = null;
        var beginFrom = 0;
        for (var i = 0; i < numberOfParts; i++) {
            percentage = parts[i] / this.radius;
            canvas.beginPath();
            canvas.lineWidth = 30;
            canvas.strokeStyle = colors[i];
            canvas.arc(this.x, this.y, this.radius, beginFrom, (Math.PI * 2 * percentage) + beginFrom);
            beginFrom = (Math.PI * 2 * percentage) + beginFrom;
            canvas.stroke();
        }
    }
}
var data = {
    numberOfParts: 4,
    parts: {
        "pt": [10, 25, 40, 25]
    },
    colors: {
        "cs": ["red", "green", "blue", "yellow"]
    },
    comments: {
        coms: ["comment1", "comment2", "comment3", "comment4"]
    }
};

var drawDount = newdrawdountChart(chart);
drawDount.set(150, 150, 100, 0, Math.PI * 2, 30, "#FFF");
drawDount.draw(data);


varPI2 = Math.PI * 2;
accumPt = 0;
for (var i = 0; i < data.parts.pt.length; i++) {
    var pt = data.parts.pt[i];
    var midPt = accumPt + pt / 2;
    var midAngle = PI2 * midPt / 100;
    console.log(i, pt, midPt);
    accumPt += pt;
    var x = 150 + 100 * Math.cos(midAngle);
    var y = 150 + 100 * Math.sin(midAngle);
    chart.save();
    chart.beginPath();
    chart.moveTo(150, 150);
    chart.lineTo(x, y);
    chart.lineWidth = 3;
    chart.strokeStyle = "black";
    chart.stroke();
    chart.restore();
}

body{ background-color: ivory; }
canvas{border:1px solid red;}

<h4>Lines from center to arc midpoints.</h4><canvasid="canvas"width=300height=300></canvas>