Circular progressbar does not work correctly

(function($){ $.fn.percentPie = function(options){ var settings = $.extend({ width: 100, trackColor: "EEEEEE", barColor1: "777777", barColor2: "777777", barWeight: 30, animateText : true, startPercent: 0, fps: 60 }, options); var $this = $(this); var $percentage = $this; var $progressCount = $percentage.find('.tag'); var prating = $percentage.find('.ratingplus').text(); var pvotenum = $percentage.find('span[id]:last').text(); var $progressCount = $percentage.find('.rateshow'); var percentageProgress = (Math.round((pvotenum - (pvotenum - prating) / 2) / pvotenum * 100)) / 10; this.css({ width: settings.width, height: settings.width }); var that = this, hoverPolice = false, canvasWidth = settings.width, canvasHeight = canvasWidth, id = $('canvas').length, canvasElement = $('<canvas id="'+ id +'" width="' + canvasWidth + '" height="' + canvasHeight + '"></canvas>'), canvas = canvasElement.get(0).getContext("2d"), centerX = canvasWidth/2, centerY = canvasHeight/2, radius = settings.width/2 - settings.barWeight/2; counterClockwise = false, fps = 1000 / settings.fps/2, update = .01; this.angle = settings.startPercent; this.drawArc = function(startAngle, percentFilled, color1, color2){ var drawingArc = true; canvas.beginPath(); canvas.arc(centerX, centerY, radius, (Math.PI/180)*(startAngle * 360 - 90), (Math.PI/180)*(percentFilled * 360 - 90), counterClockwise); var grd = canvas.createLinearGradient(0,0,settings.width,0); grd.addColorStop(0, color1); grd.addColorStop(1, color2); canvas.strokeStyle = grd; canvas.lineWidth = settings.barWeight; canvas.stroke(); drawingArc = false; } this.fillChart = function(stop){ if(settings.animateText == true){ $({numberValue: 0}).animate({numberValue: percentageProgress}, { duration: fps*100, easing: 'linear', step: function() { $progressCount.text( Math.ceil(this.numberValue) + '/10'); } }); }else{ $progressCount.text( percentageProgress + '/10'); } var loop = setInterval(function(){ hoverPolice = true; canvas.clearRect(0, 0, canvasWidth, canvasHeight); that.drawArc(0, 360, settings.trackColor, settings.trackColor); that.angle += update; that.drawArc(settings.startPercent, that.angle, settings.barColor1, settings.barColor2); if(that.angle > stop){ clearInterval(loop); hoverPolice = false; } }, fps); } this.fillChart(percentageProgress); this.append(canvasElement); return this; } }(jQuery)); $(document).ready(function() { $('.rate').percentPie({ width: 100, trackColor: "#444444", barColor1: "#22d31f", barColor2: "#d36a1f", barWeight: 10, animateText : false, fps: 60 }); }); 

 .rate { position:relative; margin:30px auto 0 auto; } .rateshow { width:100%; text-align:center; position:absolute; top:43%; color:#777777; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="rate chart"> <span class="rateshow"> <span id="ratig-layer-10" class="ignore-select"> <span class="ratingplus">+22</span> </span> <span id="vote-id"> <span rel="1"></span> 32 </span> </span> </div> 

 (function($){ $.fn.percentPie = function(options){ var settings = $.extend({ width: 100, trackColor: "EEEEEE", barColor1: "777777", barColor2: "777777", barWeight: 30, animateText : true, startPercent: 0, fps: 60 }, options); var $this = $(this); var $percentage = $this; var $progressCount = $percentage.find('.tag'); var prating = $percentage.find('.ratingplus').text(); var pvotenum = $percentage.find('span[id]:last').text(); var $progressCount = $percentage.find('.rateshow'); var percentageProgress = (Math.round((pvotenum - (pvotenum - prating) / 2) / pvotenum * 100)) / 100; this.css({ width: settings.width, height: settings.width }); var that = this, hoverPolice = false, canvasWidth = settings.width, canvasHeight = canvasWidth, id = $('canvas').length, canvasElement = $('<canvas id="'+ id +'" width="' + canvasWidth + '" height="' + canvasHeight + '"></canvas>'), canvas = canvasElement.get(0).getContext("2d"), centerX = canvasWidth/2, centerY = canvasHeight/2, radius = settings.width/2 - settings.barWeight/2; counterClockwise = false, fps = 1000 / settings.fps/2, update = .01; this.angle = settings.startPercent; this.drawArc = function(startAngle, percentFilled, color1, color2){ var drawingArc = true; canvas.beginPath(); canvas.arc(centerX, centerY, radius, (Math.PI/180)*(startAngle * 360 - 90), (Math.PI/180)*(percentFilled * 360 - 90), counterClockwise); var grd = canvas.createLinearGradient(0,0,settings.width,0); grd.addColorStop(0, color1); grd.addColorStop(1, color2); canvas.strokeStyle = grd; canvas.lineWidth = settings.barWeight; canvas.stroke(); drawingArc = false; } this.fillChart = function(stop){ if(settings.animateText == true){ $({numberValue: 0}).animate({numberValue: percentageProgress*10}, { duration: fps*100, easing: 'linear', step: function() { $progressCount.text( Math.ceil(this.numberValue) + '/10'); } }); }else{ $progressCount.text( percentageProgress + '/10'); } var loop = setInterval(function(){ hoverPolice = true; canvas.clearRect(0, 0, canvasWidth, canvasHeight); that.drawArc(0, 360, settings.trackColor, settings.trackColor); that.angle += update; that.drawArc(settings.startPercent, that.angle, settings.barColor1, settings.barColor2); if(that.angle > stop){ clearInterval(loop); hoverPolice = false; } }, fps); } this.fillChart(percentageProgress); this.append(canvasElement); return this; } }(jQuery)); $(document).ready(function() { $('.rate').percentPie({ width: 100, trackColor: "#444444", barColor1: "#22d31f", barColor2: "#d36a1f", barWeight: 10, animateText : true, fps: 60 }); }); 

 .rate { position:relative; margin:30px auto 0 auto; } .rateshow { width:100%; text-align:center; position:absolute; top:43%; color:#777777; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="rate chart"> <span class="rateshow"> <span id="ratig-layer-10" class="ignore-select"> <span class="ratingplus">+22</span> </span> <span id="vote-id"> <span rel="1"></span> 32 </span> </span> </div> 

 (function($){ $.fn.percentPie = function(options){ var settings = $.extend({ width: 100, trackColor: "EEEEEE", barColor1: "777777", barColor2: "777777", barWeight: 30, animateText : true, startPercent: 0, fps: 60 }, options); var $this = $(this); var $percentage = $this; var $progressCount = $percentage.find('.tag'); var prating = $percentage.find('.ratingplus').text(); var pvotenum = $percentage.find('span[id]:last').text(); var $progressCount = $percentage.find('.rateshow'); var percentageProgress = (Math.round((pvotenum - (pvotenum - prating) / 2) / pvotenum * 100)) / 100; this.css({ width: settings.width, height: settings.width }); var that = this, hoverPolice = false, canvasWidth = settings.width, canvasHeight = canvasWidth, id = $('canvas').length, canvasElement = $('<canvas id="'+ id +'" width="' + canvasWidth + '" height="' + canvasHeight + '"></canvas>'), canvas = canvasElement.get(0).getContext("2d"), centerX = canvasWidth/2, centerY = canvasHeight/2, radius = settings.width/2 - settings.barWeight/2; counterClockwise = false, fps = 1000 / settings.fps/2, update = .01; this.angle = settings.startPercent; this.drawArc = function(startAngle, percentFilled, color1, color2){ var drawingArc = true; canvas.beginPath(); canvas.arc(centerX, centerY, radius, (Math.PI/180)*(startAngle * 360 - 90), (Math.PI/180)*(percentFilled * 360 - 90), counterClockwise); var grd = canvas.createLinearGradient(0,0,settings.width,0); grd.addColorStop(0, color1); grd.addColorStop(1, color2); canvas.strokeStyle = grd; canvas.lineWidth = settings.barWeight; canvas.stroke(); drawingArc = false; } this.fillChart = function(stop){ if(settings.animateText == true){ $({numberValue: 0}).animate({numberValue: percentageProgress}, { duration: fps*100, easing: 'linear', step: function() { $progressCount.text( Math.ceil(this.numberValue) + '/10'); } }); }else{ $progressCount.text((percentageProgress*10) + '/10'); } var loop = setInterval(function(){ hoverPolice = true; canvas.clearRect(0, 0, canvasWidth, canvasHeight); that.drawArc(0, 360, settings.trackColor, settings.trackColor); that.angle += update; that.drawArc(settings.startPercent, that.angle, settings.barColor1, settings.barColor2); if(that.angle > stop){ clearInterval(loop); hoverPolice = false; } }, fps); } this.fillChart(percentageProgress); this.append(canvasElement); return this; } }(jQuery)); $(document).ready(function() { $('.rate').percentPie({ width: 100, trackColor: "#444444", barColor1: "#22d31f", barColor2: "#d36a1f", barWeight: 10, animateText : true, fps: 60 }); }); 

 .rate { position:relative; margin:30px auto 0 auto; } .rateshow { width:100%; text-align:center; position:absolute; top:43%; color:#777777; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="rate chart"> <span class="rateshow"> <span id="ratig-layer-10" class="ignore-select"> <span class="ratingplus">+22</span> </span> <span id="vote-id"> <span rel="1"></span> 32 </span> </span> </div>