HTML5 Canvas Circle - Drawing circles with Animation & Number

HTML Code:
<div class="circleStatsItem"> <span class="num-value">20</span> <span class="percent">%</span>
  <canvas id="myCanvas1" width="78" height="78"></canvas>
</div>
<div class="circleStatsItem"> <span class="num-value">35</span> <span class="percent">%</span>
  <canvas id="myCanvas2" width="78" height="78"></canvas>
</div>
<div class="circleStatsItem"> <span class="num-value">55</span> <span class="percent">%</span>
  <canvas id="myCanvas3" width="78" height="78"></canvas>
</div>
<div class="circleStatsItem"> <span class="num-value">85</span> <span class="percent">%</span>
  <canvas id="myCanvas4" width="78" height="78"></canvas>
</div>

CSS Styles:

<style>
.circleStatsItem {
position: relative;
background: rgba(255,255,255,0.7);
-webkit-box-shadow: inset 0 0px 0 5px rgba(0,0,0,.2), 0 0px 0 3px rgba(0,0,0,.1);
-moz-box-shadow: inset 0 0px 0 5px rgba(0,0,0,.2), 0 0px 0 3px rgba(0,0,0,.1);
box-shadow: inset 0 0px 0 5px rgba(0,0,0,.2), 0 0px 0 3px rgba(0,0,0,.1);
-webkit-border-radius: 50em;
-moz-border-radius: 50em;
border-radius: 50em;
width: 78px;
height: 78px;
margin: 10px 10px 10px auto;
color: #6b6b6d;
float:left;
}
.circleStatsItem .num-value {
font-size: 18px;
font-weight: bold;
position: absolute;
top: 36%;
margin-left: 23px;
}
.circleStatsItem .percent {
font-size: 16px;
position: absolute;
top: 38%;
margin-left: 44px;
}
</style>

JAVASCRIPT code :

<script>

// requestAnimationFrame Sping

(function() {

  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||

                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

  window.requestAnimationFrame = requestAnimationFrame;

})();

 function animate(elementId, endPercent, color) {

     var canvas = document.getElementById(elementId);

     var context = canvas.getContext('2d');

     var x = canvas.width / 2;

     var y = canvas.height / 2;

     var radius = 35;

     var curPerc = 0;

     var counterClockwise = false;

     var circ = Math.PI * 2;

     var quart = Math.PI / 2;

    

     context.lineWidth = 6;

     context.strokeStyle = color;

     context.shadowOffsetX = 0;

     context.shadowOffsetY = 0;

    

     function render(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 () {

                 render(curPerc / 100);

             });

         }

     }

     render();

 }

animate('myCanvas1', 20, '#fb7e12');

animate('myCanvas2', 35, '#54a7dd');

animate('myCanvas3', 55, '#806ce5');

animate('myCanvas4', 85, '#5fc53b');

</script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

<script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js" type="text/javascript"></script>

DEMO Link