Get distance between two points in canvas
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).
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
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)
.
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);