get line length — live canvas animation example

motion & easing8+
trig, angles & vectors8+
collision detection11+
numbers in motion7+
geometry & shapes8-
generative showpieces13+
handy helpers7+

Every pixel on screen has an (x, y) address on the Cartesian grid, so two of the three sides of this triangle are free: the horizontal distance is just the difference in the x's, and the vertical distance is the difference in the y's. You can practically read them off the grid.

Those two sides meet at a right angle, which leaves the slanted line — the hypotenuse — as the only unknown. And the hypotenuse of a right triangle is exactly what Pythagoras solved: a² + b² = c². Square the horizontal, square the vertical, add them, take the square root. That's the length of any line.

Click and drag on the screen to draw a line.