How to find a coordinate by connecting the three coordinates lie on three sides of an equilateral triangle using HTML Canvas
Let's suppose i have an equilateral triangle abc having three coordinates A(40,60), B(70,30), C(50,80) as shown in figure. Triangle with it's Coordinates
I want to find a coordinate which intersects with all the point let this coordinate be D(x,y) as shown in figure: Intersected Coordinate D with other Coordinates
Given that AD is parallel to bc, BD is parallel to ab, and DC is parallel to ac. Please help in finding coordinate D. Until now I am able to locate the three points on the triangle using HTML canvas but not able to connect all the coordinates to form D coordinate. All coordinates are the pixel values. For making a triangle:
var v0={x:114,y:366};
var v1={x:306,y:30};
var v2={x:498,y:366};
var triangle=[v0,v1,v2];
drawTriangle(triangle);
function drawTriangle(t){
ctx.beginPath();
ctx.moveTo(t[0].x,t[0].y);
ctx.lineTo(t[1].x,t[1].y);
ctx.lineTo(t[2].x,t[2].y);
ctx.closePath();
ctx.strokeStyle='black';
ctx.lineWidth=2;
ctx.stroke();
}
Function to draw coordinates on Triangle. The x,y coordinates are taken randomly.
function drawCoordinates(x,y){
ctx.fillStyle = "red"; // Red color
ctx.beginPath();
ctx.arc(x, y, pointSize, 0, Math.PI * 2, true);
ctx.fill();
//For Drwaing Cords
//drawCords(x,y);
}
Is there any way to connect these three Points to form D by satisfying this parallel conditions. Please help. Also kindly suggest if you need any further clarification, I am new to this HTML canvas technology.
1 answer

The logic is a little bit different:
 I draw the triangle
 I draw 2 lines paraleles with 2 sides of the triangle
 I calculate the points to draw a third line paralele with the third side of the triangle.
If you know the points for the 3 lines you need to calculate only the intersection of 2 of them.
To calculate the intersection I'm using http://paulbourke.net/geometry/pointlineplane/
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var cw = canvas.width = 600; var ch = canvas.height = 400; // triangle var v0={x:114,y:366}; var v1={x:306,y:30}; var v2={x:498,y:366}; ctx.beginPath(); ctx.moveTo(v0.x,v0.y); ctx.lineTo(v1.x,v1.y); ctx.lineTo(v2.x,v2.y); ctx.closePath(); ctx.stroke(); //lines var p1 = {x:40,y:300}; var p2 = {x:500,y:300}; var p3 = {x:356,y:30}; var p4 = {x:164,y:366}; // draw the first 2 lines drawLine(p1,p2); drawLine(p3,p4); // find the intersection between the 2 lines function Intersect(p1,p2,p3,p4){ var denominator = (p4.y  p3.y)*(p2.x  p1.x)  (p4.x  p3.x)*(p2.y  p1.y); var ua = ((p4.x  p3.x)*(p1.y  p3.y)  (p4.y  p3.y)*(p1.x  p3.x))/denominator; var ub = ((p2.x  p1.x)*(p1.y  p3.y)  (p2.y  p1.y)*(p1.x  p3.x))/denominator; var x = p1.x + ua*(p2.x  p1.x); var y = p1.y + ua*(p2.y  p1.y); if(ua > 0 && ua < 1 && ub > 0 && ub < 1){ return {x:x,y:y}; }else{return false;} } var o = Intersect(p1,p2,p3,p4); // draw the point of intersection if(o){ ctx.beginPath(); ctx.arc(o.x, o.y,3,0,2*Math.PI); ctx.stroke(); } // calculate the position of the 3rd line var p5 = {x:o.x+100/Math.tan(Math.PI/3),y:o.y+100}; var p6 = {x:o.x100/Math.tan(Math.PI/3),y:o.y100} drawLine(p5,p6); function drawLine(p1,p2){ ctx.beginPath(); ctx.moveTo(p1.x,p1.y); ctx.lineTo(p2.x,p2.y); ctx.stroke(); }
<canvas id="canvas"></canvas>