# 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.x,t.y);
ctx.lineTo(t.x,t.y);
ctx.lineTo(t.x,t.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

• answered 2018-10-11 21:20

The logic is a little bit different:

1. I draw the triangle
2. I draw 2 lines paraleles with 2 sides of the triangle
3. 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 3-rd line
var p5 = {x:o.x+100/Math.tan(Math.PI/3),y:o.y+100};
var p6 = {x:o.x-100/Math.tan(Math.PI/3),y:o.y-100}

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>``