Unable to draw partial arcs filled with image

[GoogleCodeExporter]

I'm trying to adapt the funcionality of a circular progress bar (from 
http://p.ar2oor.pl/cprogress/) so it can work on IE, after a couple of 
problems, I included the excanvas for the drawing, but i'm having a problem 
when drawing the progress on IE (I've tested it in both IE 8 and 9.

Instead of filling progresivelly the foreground image, it appears full, but in 
other browsers (I've tested with firefox and Chrome and in both of them it 
works fine), it goes updating partially as expected.

The way i'm trying to redraw is the following : 

 base.ctx.clearRect(0,0,base.width,base.height);
            base.ctx.save();
            base.ctx.drawImage(base.background,0,0);
            base.ctx.beginPath();
            base.ctx.lineWidth = 5;
            base.ctx.arc(base.width/2,base.height/2,base.height/2,base.i-Math.PI/2,base.j-Math.PI/2,true);
            base.ctx.lineTo(base.width/2,base.height/2);
            base.ctx.closePath();
            base.ctx.fill();
            base.ctx.clip();
            base.ctx.drawImage(base.foreground,0,0);
            base.ctx.restore();

where base.ctx is the context of the Canvas...

What is the expected output? What do you see instead?

I'm including a working sample to see the problem

Original issue reported on code.google.com by alberv...@gmail.com on 27 Jul 2012 at 1:10

Attachments:

• jquery-cprogress.js
• blank.html