Edit in JSFiddle

var max = Math.PI*2;
var min = Math.PI*1;
var current = Math.abs(Math.PI*1.8);
var radius = 50;
var lineWeight = 20;
var x = 100;
var y = 100;


// controles do dat
var controls = new function() {
this.radius = radius;
this.lineWeight = lineWeight;
this.value = current;
this.trackColor = "#eeeeee";
this.trackBarColor = "#e11818";
}
// adicionar a biblioteca dat GUI para controlar
var ui = new dat.GUI();
var controller = ui.add(controls,'radius',10,100);
var controller2 = ui.add(controls,'lineWeight',lineWeight,100);
var controller3 = ui.add(controls,'value',min,max);
var controller4 = ui.addColor(controls,'trackColor');
var controller5 = ui.addColor(controls,'trackBarColor');
// desenhar quando mudar de valor
controller.onChange(arco);
controller2.onChange(arco);
controller3.onChange(arco);
controller4.onChange(arco);
controller5.onChange(arco);

function arco(){
    var el = document.getElementById("arco").getContext("2d");
    
    // apagar antes de usar
      el.clearRect(0,0,500,500);
      el.beginPath();
      el.arc(x,y,controls.radius,min,max,false);
      el.lineWidth = controls.lineWeight;
      el.strokeStyle = controls.trackColor;    
      el.stroke();

    // desenhar o valor para preenchimento
      el.beginPath();
      el.arc(x,y,controls.radius,min,controls.value,false);
      el.lineWidth = controls.lineWeight;
      el.strokeStyle = controls.trackBarColor;
      el.stroke();

    // add label
     el.fillText((Math.abs((controls.value)*100/Math.PI)-100).toFixed(0),x-5,y);
}
arco();

<canvas id="arco" width="500" height="600">
</canvas>

<!-- www.igorcosta.com -->
<!-- twitter @igorcosta -->