animation - Animated circle using canvas with numbers counting up -

the following jsfiddle http://jsfiddle.net/qsmvn/6/ has animated circles , percentage showing how of circle has been filled. aim have percentages animated move along line right next end of it. can't figure out how that.

code of jsfiddle:

    // requestanimationframe shim (function() {   var requestanimationframe = window.requestanimationframe || window.mozrequestanimationframe ||                               window.webkitrequestanimationframe || window.msrequestanimationframe;   window.requestanimationframe = requestanimationframe; })();   var canvas = document.getelementbyid('mycanvas');  var context = canvas.getcontext('2d');  var x = canvas.width / 2;  var y = canvas.height / 2;  var radius = 75;  var endpercent = 85;  var curperc = 0;  var counterclockwise = false;  var circ = math.pi * 2;  var quart = math.pi / 2;   context.linewidth = 10;  context.strokestyle = '#ad2323';  context.shadowoffsetx = 0;  context.shadowoffsety = 0;  context.shadowblur = 10;  context.shadowcolor = '#656565';    function animate(current) {      context.clearrect(0, 0, canvas.width, canvas.height);      context.beginpath();      context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);      context.stroke();      curperc++;      if (curperc < endpercent) {          requestanimationframe(function () {              animate(curperc / 100);          });      }  }   animate(); 

you use angle have (in radians) , calculate distance based on that.

prerequisites: change couple of lines above can reuse radians:

var radians = (degrees - 90) * math.pi / 180;  // subtract 90 here ... ctx.arc(w / 2, h / 2, w / 3, 0 - 90 * math.pi / 180, radians, false); 

then use textalign , textbaseline center text:

ctx.textalign = 'center'; ctx.textbaseline = 'middle'; 

calculate position, demo shows text on inside - outside (or in middle of arc) adjust dist value:

var dist = w / 3 - 40; var tx = w * 0.5 + dist * math.cos(radians); var ty = h * 0.5 + dist * math.sin(radians); ctx.filltext(text, tx, ty); 

modified fiddle here

hope helps!