position the label percentage on canvas arc using javascript

I have drawn arc using canvas with percentage data. Now, I want to label each data with percentage text(ex: 20%). I have problem in positioning data percentage label on canvas arc. I could not position the text within each arc correctly.

blue-20% , yellow-20%, red-10%

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

var jQCanvas = $('#canvas');
var canvas = jQCanvas[0];
canvas.width = jQCanvas.width();
canvas.height = jQCanvas.height();

center_x = canvas.width / 2; //x
center_y = canvas.height / 2; //y
lineWidth = 20;
var radius = canvas.height / 2 - 20; //r
circle(center_x, center_y, radius);

function circle(x, y, r) {
  var starting_point = 1.5 * Math.PI;
  cumulative_degree = 0;
  data = [
    ['#17a2b8', 20],
    ['#ffc107', 20],
    ['#dc3545', 10]
  ]; //value in percent             
  ctx.lineWidth = 20; //arc thickness

  for (j = 0; j < data.length; j++) {
    ctx.strokeStyle = data[j][0]; //arc color
    ctx.beginPath();
    start = cumulative_degree * (Math.PI / 180) + starting_point;
    degree = data[j][1] / 100 * 360;
    cumulative_degree += data[j][1] / 100 * 360;
    end = degree * (Math.PI / 180) + start;
    ctx.arc(x, y, r, start, end);
    //ctx.fillText(data[j][1]+'%', start, end);
    ctx.stroke();

    // draw the label
    var midAngle = ((cumulative_degree - 90) - degree) + ((cumulative_degree - 90) - ((cumulative_degree - 90) - degree)) / 2;
    var labelRadius = r * .75;
    var cx = 50;
    var cy = 50;
    var lbl_x = cx + (labelRadius) * Math.cos(midAngle);
    var lbl_y = cy + (labelRadius) * Math.sin(midAngle);
    ctx.fillStyle = 'black';
    ctx.fontSize = 30;
    ctx.fillText(data[j][1], lbl_x, lbl_y);
  }
  remaining_degree = 360 - cumulative_degree;
  ctx.strokeStyle = 'silver'; //arc color
  ctx.beginPath();
  start = cumulative_degree * (Math.PI / 180) + starting_point;
  degree = remaining_degree;
  end = degree * (Math.PI / 180) + start;
  ctx.arc(x, y, r, start, end);
  if (remaining_degree > 0) {
    ctx.stroke();
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="canvas" height="150" width="150"></canvas>