javascript - How to draw a percentage of an outline of a circle -

i'm looking draw line around multiple circles, percentage of way round. need entering specific percentage's dynamically draw these circles, current method of starting , ending angle causing problems:

var data = [     {id:'firefox', angle:90-90},     {id:'chrome', angle:144},     {id:'ie', angle:72},     {id:'opera', angle:28.8},     {id:'safari', angle:7.2} ]; data.foreach(function(e){     var canvas = document.getelementbyid(e.id);     var context = canvas.getcontext('2d');     context.beginpath();     context.arc(64, 64, 60, 1.5*math.pi, e.angle, true);     context.linewidth = 8;     context.linecap = "round";     context.strokestyle = '#c5731e';     context.stroke(); }); 

var data = [     {id:'firefox', percent:100},     {id:'chrome', percent:50},     {id:'ie', percent:25},     {id:'opera', percent:33.33},     {id:'safari', percent:66.66} ]; data.foreach(function(e){     var canvas = document.getelementbyid(e.id);     var context = canvas.getcontext('2d');      var startangle = 1.5 * math.pi;                  //top of arc     var endangle = (2 * math.pi) / 100 * e.percent;  //"2 * pi" = 360°                                                       //and "/ 100 * e.percent" = e.percent%      context.beginpath();     context.arc(64, 64, 60, startangle, startangle - endangle, true);                                                      //substract(!) end start, because going anticlockwise!     context.linewidth = 8;     context.linecap = "round";     context.strokestyle = '#c5731e';     context.stroke(); }); 

see comments ;)

docs:

http://www.html5canvastutorials.com/tutorials/html5-canvas-arcs/