I am drawing on canvas and I want to get a point by length between two other points. I have:

let uno = {x:100, y:200};
let dos = {x: 900, y:2000};
let length = 20; //px

How can I get point between uno and dos by distance in pixels length (starting from uno)? Example image in the

I am drawing on canvas and I want to get a point by length between two other points. I have:

let uno = {x:100, y:200};
let dos = {x: 900, y:2000};
let length = 20; //px

How can I get point between uno and dos by distance in pixels length (starting from uno)? Example image in the

• javascript
• math

• Possible duplicate of Finding a point on a line – Rafael Commented Jan 18, 2017 at 21:41
• Note there is a math site in the Stack Exchange network of sites, which has the answer to the question: math.stackexchange./q/155514 – Heretic Monkey Commented Jan 18, 2017 at 21:44
• Possible duplicate of Finding coordinates of a point between two points? This says it's about WPF, but it's basic math. – Heretic Monkey Commented Jan 18, 2017 at 21:45

3 Answers 3

Using trigonometry:

function lenpoint(x1, y1, x2, y2, len) {
  var dx = x2-x1, 
      dy = y2-y1;
  var theta = Math.atan2(dy, dx);
  var xp = len * Math.cos(theta), 
      yp = len * Math.sin(theta);
  return [xp + x1, yp + y1];
}

function getCoordinateByLength(point1, point2, length){
    var dx = point2.x - point1.x;
    var dy = point2.y - point1.y;
    var distance = Math.sqrt(dx * dx + dy * dy);
    if(distance == 0)
        return {x: point1.x, y: point1.y};

    var rx = point1.x + (point2.x - point1.x) * length / distance;
    var ry = point1.y + (point2.y - point1.y) * length / distance;
    return {x: rx, y: ry};
}

Try this:

let uno = {x:100, y:200};
let dos = {x: 900, y:2000};
let length = 20; //px

let point = {
  x: findPoint(length, uno.x, dos.x),
  y: findPoint(length, uno.y, dos.y),
}

console.log(point);

function findPoint(d, a, b) {
  return d * (b - a) + a;
}

Based on https://math.stackexchange./a/1625335; haven't tested this myself.