Get distance between two points in canvas

Question

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

User · Answer

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);

User · Answer

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

User · Answer

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

User · Answer

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     var a   x1 - x2  var b   y1 - y2   var c   Math sqrt  a a   b b        c is the distance

User · Answer

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

User · Answer

The distance between two coordinates x and y  x1 and y1 is the first point position  x2 and y2 is the second point position    x000D   x000D  function diff  num1  num2    x000D    if  num1  gt  num2    x000D      return  num1 - num2   x000D      else   x000D      return  num2 - num1   x000D      x000D     x000D   x000D  function dist  x1  y1  x2  y2    x000D    var deltaX   diff x1  x2   x000D    var deltaY   diff y1  y2   x000D    var dist   Math sqrt Math pow deltaX  2    Math pow deltaY  2    x000D    return  dist   x000D     x000D   x000D   x000D

[javascript] Get distance between two points in canvas

Examples related to javascript

Examples related to canvas