javascript - Draw triangle by the intersect of 3 circles -

i want draw triangle base on intersection points of 3 circles. there function or method javascript solve this? or need perform math calculation exact position of intersection point , draw triangle myself.

function drawmap(){     var ctx = $('#map')[0].getcontext("2d");      // draw map of room 400cm * 300cm     ctx.fillstyle = "#ecf0f1"     ctx.beginpath();     ctx.rect(0, 0, 300, 400);     ctx.closepath();     ctx.fill();      //draw first circle (blue one)     ctx.fillstyle = "rgba(52, 152, 219,0.5)";     ctx.beginpath();     ctx.arc(0, 0, 200, 0, math.pi*2, true);     ctx.closepath();     ctx.fill();      //draw second circle(green one)     ctx.fillstyle = "rgba(46, 204, 113,0.5)";     ctx.beginpath();     ctx.arc(0, 400, 250, 0, math.pi*2, true);     ctx.closepath();     ctx.fill();      // draw third circle (yellow one)     ctx.fillstyle = "rgba(241, 196, 15,0.5)";     ctx.beginpath();     ctx.arc(300, 200, 280, 0, math.pi*2, true);     ctx.closepath();     ctx.fill(); } 

finding intersection points on circumference of 3 circles

here's how it:

define 3 circles:

var a={x:0,y:0,r:200,color:"rgba(52, 152, 219,0.5)"}; var b={x:0,y:400,r:250,color:"rgba(46, 204, 113,0.5)"}; var c={x:300,y:200,r:280,color:"rgba(241, 196, 15,0.5)"}; 

calculate intersection points of 3 circles vs each other (ab,bc,ca):

var intersections=[]; var ab=circleintersections(a,b); // see example code below circleintersections() var bc=circleintersections(b,c); var ca=circleintersections(c,a); if(ab){intersections.push(ab);} if(bc){intersections.push(bc);} if(ca){intersections.push(ca);} 

test each intersection point. keep intersection points in 3 circles.

var triangle=[]; for(var i=0;i<intersections.length;i++){     var pt=intersections[i];     if(ptisincircle(pt,a) && ptisincircle(pt,b) && ptisincircle(pt,c)){         triangle.push(pt);     } } 

in example code left 3 intersection points in 3 circles.

but circles positioned elsewhere might fewer or more 3 intersection points.

use context path commands draw polyline between 3 discovered points.

if(triangle.length==3){     ctx.beginpath();     ctx.moveto(triangle[0].x,triangle[0].y);     ctx.lineto(triangle[1].x,triangle[1].y);     ctx.lineto(triangle[2].x,triangle[2].y);     ctx.closepath();     ctx.stroke(); } 

example code , demo:

var canvas=document.getelementbyid("canvas");  var ctx=canvas.getcontext("2d");  var cw=canvas.width;  var ch=canvas.height;  function reoffset(){    var bb=canvas.getboundingclientrect();    offsetx=bb.left;    offsety=bb.top;          }  var offsetx,offsety;  reoffset();  window.onscroll=function(e){ reoffset(); }          var a={x:0,y:0,r:200,color:"rgba(52, 152, 219,0.5)"};  var b={x:0,y:400,r:250,color:"rgba(46, 204, 113,0.5)"};  var c={x:300,y:200,r:280,color:"rgba(241, 196, 15,0.5)"};    var intersections=[];  var ab=circleintersections(a,b);  var bc=circleintersections(b,c);  var ca=circleintersections(c,a);  if(ab){intersections=intersections.concat(ab);}  if(bc){intersections=intersections.concat(bc);}  if(ca){intersections=intersections.concat(ca);}    var triangle=[];  for(var i=0;i<intersections.length;i++){    var pt=intersections[i];    if(ptisincircle(pt,a) && ptisincircle(pt,b) && ptisincircle(pt,c)){      triangle.push(pt);    }  }    drawmap();    if(triangle.length==3){    ctx.beginpath();    ctx.moveto(triangle[0].x,triangle[0].y);    ctx.lineto(triangle[1].x,triangle[1].y);    ctx.lineto(triangle[2].x,triangle[2].y);    ctx.closepath();    ctx.stroke();  }    function drawmap(){      // draw map of room 400cm * 300cm    ctx.fillstyle = "#ecf0f1"    ctx.beginpath();    ctx.rect(0, 0, 300, 400);    ctx.closepath();    ctx.fill();      drawcircle(a);    drawcircle(b);    drawcircle(c);    }    function drawcircle(c){    ctx.fillstyle = c.color;    ctx.beginpath();    ctx.arc(c.x,c.y,c.r, 0, math.pi*2, true);    ctx.closepath();    ctx.fill();  }    // intersection points of 2 circles  function circleintersections(c0,c1) {    var x0=c0.x;    var y0=c0.y;    var r0=c0.r;    var x1=c1.x;    var y1=c1.y;    var r1=c1.r;      // calc circles' proximity    var dx = x1 - x0;    var dy = y1 - y0;    var d = math.sqrt((dy*dy) + (dx*dx));      // return if circles not intersect.     if (d > (r0 + r1)) { return; }    // return if 1 circle contained in other     if (d < math.abs(r0 - r1)) { return; }      // calc 2 intersection points    var = ((r0*r0) - (r1*r1) + (d*d)) / (2.0 * d) ;    var x2 = x0 + (dx * a/d);    var y2 = y0 + (dy * a/d);    var h = math.sqrt((r0*r0) - (a*a));    var rx = -dy * (h/d);    var ry = dx * (h/d);    var xi = x2 + rx;    var xi_prime = x2 - rx;    var yi = y2 + ry;    var yi_prime = y2 - ry;      return([ {x:xi,y:yi}, {x:xi_prime,y:yi_prime} ]);  }    function ptisincircle(pt,circle){    var dx=pt.x-circle.x;    var dy=pt.y-circle.y;    var r=circle.r+1; // allow circle 1px expansion rounding    return(dx*dx+dy*dy<=r*r);  }

#canvas{border:1px solid red; margin:0 auto; }

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