Высота сегментов круговой диаграммы не одинакова при добавлении разрыва между каждым сегментом

Question

Я пытаюсь добавить разрыв между 2 сегментами круговой диаграммы, но после добавления разрыва высота не совпадает с концом каждого сегмента.Кроме того, холст не создается из центра холста, поэтому края обрезаются на верхней и левой сторонах.Как я могу это исправить?

Кроме того, я не знаю, как добавить эффект наведения, чтобы создать всплывающую подсказку со значением каждого сегмента.Как я могу это сделать?

var obj = {
  values: [65, 35],
  colors: ['#dda633', '#57b8bb']
};

// Drwaing pie chart 
drawpie('myCanvas', obj, 10, 40);


function drawpie(canvasId, jsonObj, offset=null, doughnutHoleSize=null) {
  var myCanvas = document.getElementById(canvasId);
  var ctx = myCanvas.getContext("2d");

  var xaxis = myCanvas.width/2 - offset*2;
  var yaxis = myCanvas.height/2 - offset*2;
  var radius = xaxis;

  var total_value = mathSum(jsonObj.values);

  // Used to calculate the X and Y offset
  var begin=0, end=0, offsetX, offsetY, medianAngle, slice_angle, start_angle=0;

  for(var i = 0; i < jsonObj.values.length; i = i + 1) {

    begin = i==0 ? 0 : end;
    end   = jsonObj.values[i]*(100/total_value) + begin;

    var beginAngle  = ((begin / 100 ) * Math.PI * 2) - Math.PI/2; 
    var endAngle    = ((end / 100 ) * Math.PI * 2) - Math.PI/2; 

    // The medium angle is the average of two consecutive angles
    medianAngle = (endAngle + beginAngle) / 2;

    // X and Y calculations
    offsetX = offset==0 || offset==null ? 0 : Math.cos(medianAngle) * offset;
    offsetY = offset==0 || offset==null ? 0 : Math.sin(medianAngle) * offset;

    ctx.beginPath();
    ctx.fillStyle = jsonObj.colors[i];

    // Adding the offsetX and offsetY to the center of the arc              
    ctx.moveTo(xaxis + offsetX, yaxis + offsetY);
    ctx.arc(xaxis + offsetX, yaxis + offsetY, radius, beginAngle, endAngle);
    ctx.fill(); 

    console.log(xaxis + offsetX, yaxis + offsetY, radius, beginAngle, endAngle);
  }
  if(doughnutHoleSize!=null){
    ctx.fillStyle = '#fff';
    ctx.beginPath();
    ctx.moveTo(xaxis, yaxis);
    ctx.arc(xaxis, yaxis, (doughnutHoleSize/100)*radius, 0, 2*Math.PI);
    ctx.closePath();
    ctx.fill();
  }
}


function mathSum(arr){
  var sum = 0;
  arr.map((item)=>{
    sum = sum+item;
  })
  return sum;
}

<canvas id="myCanvas" width="400" height="400"></canvas>