Circle progress bar + fb

HTML

<input id="range" type="range" min="0" max="100" />
<canvas id="counter" width="240" height="240"></canvas>

CSS

canvas {
    display: block;
}

input {
    width: 200px;
}

body {
    background: #222;
}

JavaScript

// SVG stuff
var range = document.id('range');
var bg = document.id('counter');
var ctx = ctx = bg.getContext('2d');
var imd = null;
var circ = Math.PI * 2;
var quart = Math.PI / 2;



    
ctx.beginPath();
ctx.strokeStyle = '#99CC33';
//ctx.lineCap = 'round';
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = 10;
ctx.lineWidth=3.0;
ctx.shadowColor = "rgba(153, 204, 51, 0.6)";
ctx.closePath();
ctx.fill();

    //see: http://simon.html5.org/dump/html5-canvas-cheat-sheet.html
ctx.lineWidth = 9.0;
ctx.lineCap='butt';

//Load the image object in JS, then apply to canvas onload
var fb = new Image();
fb.onload = function() {
ctx.drawImage(fb, 0, 0, 240, 240);
}
fb.src = "http://icons.iconarchive.com/icons/emey87/social-button/256/facebook-icon.png"

imd = ctx.getImageData(0, 0, 240, 240);

var draw = function(current) {
    ctx.putImageData(imd, 0, 0);
    ctx.beginPath();
    //see: http://simon.html5.org/dump/html5-canvas-cheat-sheet.html
    //    arc(float x, float y, float radius, float startAngle, float endAngle, boolean anticlockwise)
    ctx.arc(120, 120, 90, -(quart), ((circ) * current) - quart, false);
    //see http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/
    
    //context.drawImage(imgObj, XPos, YPos, Width, Height);
ctx.drawImage(fb, 0, 0, 240, 240);
    ctx.stroke();
    
}

range.addEvents({
    mousemove: function() {
        draw(this.value / 100);
    }
});

var myFx = new Fx({
    duration: 8000,
    transition: 'bounce:out',
    onStep: function(step){
        draw(step / 100);
        range.set('value', step);
    }
});

myFx.set = function(now){
    var ret = Fx.prototype.set.call(this, now);
    this.fireEvent('step', now);
    return ret;
};

myFx.start(0, 100);