javascript - change speed of animation

Question

I have a piece of code. But my problem is.. I have no idea where i can change the animation speed. I've tried to edit last line into animate('fast'); but without success..how can i solve it? I know it is mainy javascript but so far I didnt find such code which will be better in jquery

$('#kim-jestesmy').waypoint(function(direction) {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                            window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
var canvas  = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var circles = [];

createCircle(100,100,'78', function() {
    createCircle(270,100,'460', function() {
        createCircle(440,100,'20', function() {
            createCircle(610,100,'15', null);
        });
    });
});

function createCircle(x,y,text,callback) {
     var radius = 75;
     var endPercent = 101;
     var curPerc = 0;
     var counterClockwise = false;
     var circ = Math.PI * 2;
     var quart = Math.PI / 2;

     context.lineWidth = 10;
     context.strokeStyle = '#E60086';
     context.shadowOffsetX = 0;
     context.shadowOffsetY = 0;

     function doText(context,x,y,text) {
        context.lineWidth = 1;
        context.fillStyle = "#919191";
        context.lineStyle = "#919191";
        context.font      = "60px NillandBold";
        context.textAlign = "center";
        context.textBaseline = "middle";
        context.fillText(text, x, y);
     }
     function animate(current) {
         context.lineWidth = 10;
         context.clearRect(0, 0, canvas.width, canvas.height);
         context.beginPath();
         context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);
         context.stroke();
         curPerc++;
         if (circles.length) {
             for (var i=0; i<circles.length; i++) {
                 context.lineWidth = 10;
                 context.beginPath();
                 context.arc(circles[i].x, circles[i].y, radius, -(quart), ((circ) * circles[i].curr) - quart, false);
                 context.stroke();
                 doText(context,circles[i].x,circles[i].y,circles[i].text);
             }
         }
         if (curPerc < endPercent) {
             requestAnimationFrame(function () {
                 animate(curPerc / 100)
             });
         }else{
             var circle = {x:x,y:y,curr:current,text:text};
             circles.push(circle);
             doText(context,x,y,text);
             if (callback) callback.call();
         }
     }

     animate();
}
});

Answer 1

Since you're not throttling the fps of your animation, each frame is being rendered as fast as possible with this code. If you want it to be faster, the simplest answer is to drop frames by incrementing the curPerc variable by more than one:

 function animate(current) {
     context.lineWidth = 10;
     context.clearRect(0, 0, canvas.width, canvas.height);
     context.beginPath();
     context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);
     context.stroke();
     curPerc += 2;
     ...

The above code will complete twice as quickly. If curPerc does not divide 100 evenly (100%curPerc != 0), then change the variable endPercent accordingly.