Animate A Fill Circle Like Pie Chart Using Canvas

Basically I want to be able to Fill a Circle using canvas, but it animate like pie chart and mask to show new image in circle. My canvas knowledge isn't amazing, Here is an image t

Solution 1:

This is one way:

1. Draw your gray background.
2. Fill your percent-arc with a starting angle at -Math.PI*2 (=="12 on a clock") and an ending angle of -Math.PI*2 + Math.PI*2*percent (==a full circle of 2PI times your desired percent).
3. Draw your logo.

To animate, just use a requestAnimationFrame loop that incrementally draws the percent-arc starting at 0 percent and ending at your target percent.

Example code and a Demo:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var nextTime=0;
var duration=1000;
var endingPct=75;
var pct=0;
var increment=duration/pct;
requestAnimationFrame(animate);

functionanimate(time){
    draw(pct);
    pct++;
    if(pct<=endingPct){requestAnimationFrame(animate);}
}

functiondraw(pct){
    var endRadians=-Math.PI/2+Math.PI*2*pct/100;
    ctx.fillStyle='lightgray';
    ctx.fillRect(0,0,cw,ch);
    ctx.beginPath();
    ctx.arc(150,125,100,-Math.PI/2,endRadians);
    ctx.lineTo(150,125);
    ctx.fillStyle='white';
    ctx.fill();
    ctx.beginPath();
    ctx.moveTo(150,100);
    ctx.lineTo(175,150);
    ctx.quadraticCurveTo(150,125,125,150);
    ctx.closePath();
    ctx.strokeStyle='#13a8a4';
    ctx.lineJoin='bevel';
    ctx.lineWidth=10;
    ctx.stroke();
    ctx.fillStyle='black';
    ctx.textAlign='center';
    ctx.textBaseline='middle'
    ctx.font='18px arial';
    ctx.fillText('ADUR',150,175);
}

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }

<canvasid="canvas"width=300height=300></canvas>

[Update: We needed an image clipped inside the animated wedge]

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var nextTime=0;
var duration=1000;
var endingPct=75;
var pct=0;
var increment=duration/pct;
var cx=cw/2;
var cy=ch/2;

var img=newImage();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/mm.jpg";
functionstart(){
    requestAnimationFrame(animate);
}

functionanimate(time){
    draw(pct);
    pct++;
    if(pct<=endingPct){requestAnimationFrame(animate);}
}

functiondraw(pct){
    //var endRadians=-Math.PI/2+Math.PI*2*pct/100;
    //
    ctx.fillStyle='lightgray';
    ctx.fillRect(0,0,cw,ch);
    //
    ctx.beginPath();
    ctx.arc(cx,cy,100,-Math.PI/2,endRadians);
    ctx.lineTo(cx,cy);
    ctx.save();
    ctx.clip();
    ctx.drawImage(img,cx-img.width/2,cx-img.height/2);
    ctx.restore();
}

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }

<canvasid="canvas"width=300height=300></canvas>