I want to draw a triangle base on the intersection points of 3 circles. Is there any function or any method with JavaScript to solve this? Or I need to perform some math calculation to get exact position of the intersection point and draw the triangle myself.
function drawMap(){
var ctx = $('#map')[0].getContext("2d");
// Draw the map of my room 400cm * 300cm
ctx.fillStyle = "#ecf0f1"
ctx.beginPath();
ctx.rect(0, 0, 300, 400);
ctx.closePath();
ctx.fill();
//Draw the 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 the 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 the 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 the intersection points which are on the circumference of all three circles
Here's how to do it:
Define 3 circles:
Calculate the intersection points of the 3 circles vs each other (AB,BC,CA):
Test each intersection point. Keep any intersection points that are in all 3 circles.
In your example code you are left with 3 intersection points that are also in all 3 circles.
But with circles positioned elsewhere you might get fewer or more than 3 intersection points.
Use context path commands to draw a polyline between the 3 discovered points.
Example code and a Demo: