Arc two points

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 = {
    color :"red",
    cont:0,
    canvas:document.getElementById('canvas'),
    ctx:canvas.getContext('2d'),
    
    //////// RENDER //////////////////////
 render: function(requestFrame) {
    var _this=this;
    if(requestFrame)
        window.requestAnimFrame(function(){_this.render(true);});

    this.cont=this.cont>300?80:this.cont+1;    
    this.p1.x=this.cont;
    ctx=this.ctx;
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = this.color;
    this.drawPoint(this.p1);
     this.drawPoint(this.p2);
    // this.drawLine(this.p1,this.p2);
     //this.drawPerpendicularLine(this.p1,this.p2);
     if(this.mousePos){
         this.drawPoint(this.mousePos);
         this.drawIntersectP(this.p1,this.p2);
     }
},
    
drawIntersectP:function(p1,p2){
    //two lines where intersect
    var mP1=new Point((p1.x+p2.x)/2,(p1.y+p2.y)/2);
    var v=new Point(p2.x-p1.x,p2.y-p1.y);
    var vP=new Point(v.y,-v.x);
    var mP2=mP1.sum(vP);
    var m=this.mousePos;

    
    //Calc Intersect P.
    var l2 = mP1.dist2(mP2);
    var t=(m.rest(mP1).dot(mP2.rest(mP1)))/l2; 
    var ip=mP1.sum(mP2.rest(mP1).mult(t));
    this.drawPoint(ip);
   // this.drawLine(mP1,ip);
    //Angles
    var ang1 = Math.atan2(p1.y - ip.y, p1.x - ip.x);
    var ang2 = Math.atan2(p2.y - ip.y, p2.x - ip.x);
    var r=ip.dist(p1);
    ctx.fillStyle='#aaf';
    ctx.beginPath();
    ctx.moveTo(ip.x,ip.y);
    ctx.lineTo(p1.x,p1.y);
    ctx.arc(ip.x, ip.y ,r,ang2,ang1,true);
    ctx.lineTo(p2.x,p2.y);
    ctx.lineTo(ip.x,ip.y);
    ctx.fill();
    //this.drawArc(ip,r,ang2,ang1);

},
    
drawArc:function(p,r,angIni,angEnd){
    ctx.beginPath();
    ctx.arc(p.x, p.y ,r,angIni,angEnd,true);
    ctx.stroke();
},
    
drawPoint:function(p){
    ctx.beginPath();
    ctx.arc(p.x, p.y ,2,0,2*Math.PI,true);
    ctx.fill();
},
    
drawLine:function(p1,p2){
        ctx.lineWidth = 1;
       ...