arc with bezier

by jpeter06

HTML

<canvas id="canvas"></canvas>

CSS

* { margin:0; padding:0; } /* to remove the top and left whitespace */
html, body { width:100%; height:100%; } /* j full screen*/
canvas { display:block; } /* remove  scrollbars */
canvas {    background: #eee;}

JavaScript

//////////////////DRAWER //////////////////////

var Drawer = {
    ang90:Math.PI*0.5,
    color :"red",
    cont:0,
    initTime:new Date(),
    animTime:3000,
    notEnded:true,
    initAng:-Math.PI*0.5,
    ang:Math.PI/0.6,
    canvas:document.getElementById('canvas'),
    ctx:canvas.getContext('2d'),
    
    //////// RENDER //////////////////////
 render: function(requestFrame) {
    var _this=this;
    if(requestFrame && this.notEnded)
        window.requestAnimFrame(function(){_this.render(true);});
    var actualTime=new Date();
    var t=(actualTime.getTime()-this.initTime.getTime())/this.animTime;
     if(t>=1){
         t=1;
         this.notEnded=false;
     }
        
    ctx=this.ctx;
    ctx.fillStyle = '#DDD';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
     

    var ang=this.ang*t;
    var endAng=ang;
    var initAng=this.initAng;
    var endAng=this.initAng+ang;

    var r=Math.min(canvas.width,canvas.height)/2.1; //radio
     var r2=r*ang/(Math.PI*0.5); //bezier proportional to the radio.
     var cc=[canvas.width/2,canvas.height/2]; //Center.
     
    ctx.fillStyle = '#f00';
    ctx.strokeStyle = "#fff";
     ctx.lineWidth = 3;
     //ARC
     //this.drawArc(cc,r,this.initAng,ang);
     //Beezier 90's
     var points=this.getPointsBeezierArc(cc,r,this.initAng,ang);
     this.drawPoints(points);
     //this.drawBeezierArc(cc,r,this.initAng,ang);

     ctx.fill();
     ctx.stroke();
},

    drawPoints:function(points){
        ctx.beginPath();
        for(var i=0;i<points.length;i++){
            var p=points[i];
            if(p.length==2){
                if(i==0)
                    ctx.moveTo(p[0],p[1]);
                else
                    ctx.lineTo(p[0],p[1]);
            }else{
                var pC1=p[1];
                var pC2=p[2];
                var p2=p[3];
                ctx.bezierCurveTo(pC1[0], pC1[1], 
                                  pC2[0], pC2[1], 
                          p2[0],p2[1]);
            }
    ...