Convert this Mootools code into jQuery code

Question

I'm want to convert script to jQuery, but it dosen't work... it was Mootools code :

var bg = $('#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 = 'square';
ctx.closePath();
ctx.fill();
ctx.lineWidth = 10.0;

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

ctx.putImageData(imd, 0, 0);
ctx.beginPath();
ctx.arc(120, 120, 70, -(quart), ((circ) * 0.5) - quart, false);
ctx.stroke();

Here is the jsFiddle : http://jsfiddle.net/Aapn8/2832/

I tried to replace the document.id with the jquery selector $(''), nothing...

Thanks !

Answer 1

Here is a working example with the link, remember that for the easeOutBounce animation you need additional plugin as jQuery alone has just simple animation types. This needs to be done on dom ready or window load functions (in jsfiddle we are using provided checkbox on the left)

// SVG stuff
var range = $('#range').get(0);
var bg = $('#counter').get(0);
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 = 'square';
ctx.closePath();
ctx.fill();
ctx.lineWidth = 10.0;

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

var draw = function(current) {
    ctx.putImageData(imd, 0, 0);
    ctx.beginPath();
    ctx.arc(120, 120, 70, -(quart), ((circ) * current) - quart, false);
    ctx.stroke();
}
$(range)
.val(0)
.on('mousemove', function() {
        draw(this.value / 100);
})
.animate({
    'value':100
},{
    'duration':5000,
    'easing':'easeOutBounce',
    'step': function (step, fx) {
        draw(step / 100);
    }
});

http://jsfiddle.net/BLtaF/ (with easing plugin attached)