Animated canvas with dynamic sections

Question

I am trying to implement the same idea as this: http://jsfiddle.net/oskar/Aapn8/ however I am trying to use sections of different sizes so rather than

var draw = function(current) {
    ctx.putImageData(imd, 0, 0);
    ctx.beginPath();
    ctx.arc(120, 120, 70, -(quart), ((circ) * current) - quart, false);
    ctx.stroke();
}

as the draw function i am using:

var draw = function(current) {
     for (i = 0 ; i < degrees.length ; i++) {
        color = colors[i];
        ctx.fillStyle = colors[i];
        ctx.beginPath();
        ctx.moveTo(cx,cy);
        ctx.arc(cx,cy,radius,start,start+toRad(degrees[i]));
        ctx.lineTo(cx,cy);
        ctx.closePath();
        ctx.fill();
        start += toRad(degrees[i]);
     }
}

But it doesn't work ( https://jsfiddle.net/py6t8yj0/5/ ) but does draw the circle as desired.

I don't need the 'range' selector however I would like the bouncing effect once the circle reaches the end.

If anyone could be of help that'd be great :D.

Thanks

Answer 1

looks like you don't have Mootools included in that fiddle. I am getting an error:

Uncaught ReferenceError: Fx is not defined

If you click the Javascript settings button, you can add a Mootools dependency. Here's the jsfiddle updated with that dependency: https://jsfiddle.net/py6t8yj0/1/