Canvas: при загрузке страницы в течении нескольких секунд плавно отрисовать с нуля до целого круга

$(function(){
        function Cirkus() {
            var canvas = document.getElementById("Canvas");
            var c = canvas.getContext("2d");
 
            var centerX = 100; // Координата центра круга по оси X
            var centerY = 100; // Координата центра круга по оси Y
            var radius= 45; // Радиус окружности
            var startingAngle = 0 * Math.PI; // Начальная точка окружности
            var endingAngle = 2 * Math.PI;  // Конечная точка окружности
            var counterclockwise = false;
     
            c.arc(centerX,centerY, radius, startingAngle,
                    endingAngle,counterclockwise);
            c.lineWidth=5; // Толщина обводки (границы) окружности
            c.strokeStyle="#222"; // Цвет обводки (границы) окружности
            c.fillStyle = '#FFF'; // Цвет заливки окружности
            c.fill();
            c.stroke();
        }
         
            Cirkus();
    })

var circle = (function (x, y, radius, percentage, fill){
    var c = this.context;
    var startAngle = -Math.PI / 2;
    var endAngle = 2 * Math.PI * (percentage / 100) - Math.PI / 2;
    
    c.lineWidth = 8;
    c.strokeStyle = 'darkblue';
    c.fillStyle = 'lightgreen';
    c.beginPath();
    c.arc(x, y, radius, startAngle, endAngle, false);
    c.stroke();
    if (!fill) return;
    
    c.beginPath();
    c.arc(x, y, (radius - c.lineWidth / 2) + 1, 0, 2 * Math.PI, false);
    c.fill();
}).bind({ context: document.querySelector('#Canvas').getContext('2d')});
 
var syncObj = {
    current: 0,
    step: 5,
    interval: null
}
var iterator = (function (){
   circle(100, 100, 45, this.current, this.current >= 100);
   if (this.current >= 100) clearInterval(this.interval);
   this.current += this.step;
}).bind(syncObj);
 
syncObj.interval = setInterval(iterator, 50);