139

I have canvas drawing tab and want lineWidth to be based on distance between two last mousemove coordinate updates. I will make translation of distance to width myself, I just need to know how to get distance between those points (I already have coordinates of those pointes).

Anagmate
  • 1,825
  • 3
  • 16
  • 15

7 Answers7

264

You can do it with pythagoras theorem

If you have two points (x1, y1) and (x2, y2) then you can calculate the difference in x and difference in y, lets call them a and b.

enter image description here

var a = x1 - x2;
var b = y1 - y2;

var c = Math.sqrt( a*a + b*b );

// c is the distance
Tony L.
  • 17,638
  • 8
  • 69
  • 66
Igor Šarčević
  • 3,481
  • 1
  • 19
  • 21
186

Note that Math.hypot is part of the ES2015 standard. There's also a good polyfill on the MDN doc for this feature.

So getting the distance becomes as easy as Math.hypot(x2-x1, y2-y1).

David Gee
  • 1,961
  • 1
  • 11
  • 2
  • 3
    I won't recommend using `Math.hypot()` to calculate the distance when performances matters. It is about 100 times slower. – Markus Zeller Jan 02 '21 at 14:44
  • 1
    Here is an explanation of why the Math.hypot is slower, basically because it is going to be more accurate. That may or may not matter to you. https://stackoverflow.com/questions/3764978/why-hypot-function-is-so-slow – RayB Apr 04 '21 at 19:32
35

http://en.wikipedia.org/wiki/Euclidean_distance

If you have the coordinates, use the formula to calculate the distance:

var dist = Math.sqrt( Math.pow((x1-x2), 2) + Math.pow((y1-y2), 2) );

If your platform supports the ** operator, you can instead use that:

const dist = Math.sqrt((x1 - x2) ** 2 + (y1 - y2) ** 2);
bb216b3acfd8f72cbc8f899d4d6963
  • 743
  • 11
  • 21
ekstrakt
  • 900
  • 1
  • 12
  • 28
15

To find the distance between 2 points, you need to find the length of the hypotenuse in a right angle triangle with a width and height equal to the vertical and horizontal distance:

Math.hypot(endX - startX, endY - startY)
Richie Bendall
  • 7,738
  • 4
  • 38
  • 58
5

Here's a quick one-liner to find the distance between (x1, y1) and (x2, y2)

const distance = (x1, y1, x2, y2) => Math.hypot(x2 - x1, y2 - y1);

Here is a short runnable demo:

const distance = (x1, y1, x2, y2) => Math.hypot(x2 - x1, y2 - y1); 

var x1 = 1
var y1 = 5

var x2 = 4
var y2 = 5

var d = distance(x1, y1, x2, y2)

console.log(`The distance between (${x1}, ${y1}) and (${x2}, ${y2}) is ${d}`)
Coder Gautam YT
  • 1,044
  • 7
  • 20
3

i tend to use this calculation a lot in things i make, so i like to add it to the Math object:

Math.dist=function(x1,y1,x2,y2){ 
  if(!x2) x2=0; 
  if(!y2) y2=0;
  return Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1)); 
}
Math.dist(0,0, 3,4); //the output will be 5
Math.dist(1,1, 4,5); //the output will be 5
Math.dist(3,4); //the output will be 5

Update:

this approach is especially happy making when you end up in situations something akin to this (i often do):

varName.dist=Math.sqrt( ( (varName.paramX-varX)/2-cx )*( (varName.paramX-varX)/2-cx ) + ( (varName.paramY-varY)/2-cy )*( (varName.paramY-varY)/2-cy ) );

that horrid thing becomes the much more manageable:

varName.dist=Math.dist((varName.paramX-varX)/2, (varName.paramY-varY)/2, cx, cy);
Symbolic
  • 693
  • 5
  • 10
3

The distance between two coordinates x and y! x1 and y1 is the first point/position, x2 and y2 is the second point/position!

function diff (num1, num2) {
  if (num1 > num2) {
    return (num1 - num2);
  } else {
    return (num2 - num1);
  }
};

function dist (x1, y1, x2, y2) {
  var deltaX = diff(x1, x2);
  var deltaY = diff(y1, y2);
  var dist = Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2));
  return (dist);
};
Daniel
  • 73
  • 5