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

  • answered 2018-10-11 21:20 enxaneta

    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>