Javascript: Find point on perpendicular line always the same distance away

Question

I'm trying to find a point that is equal distance away from the middle of a perpendicular line. I want to use this point to create a Bézier curve using the start and end points, and this other point I'm trying to find. I've calculated the perpendicular line, and I can plot points on that line, but the problem is that depending on the angle of the line, the points get further away or closer to the original line, and I want to be able to calculate it so it's always X units away. Take a look at this JSFiddle which shows the original line, with some points plotted along the perpendicular line: http://jsfiddle.net/eLxcB/1/. If you change the start and end points, you can see these plotted points getting closer together or further away. How do I get them to be uniformly the same distance apart from each other no matter what the angle is? Code snippit below: ``` // Start and end points var startX = 120 var startY = 150 var endX = 180 var endY = 130 // Calculate how far above or below the con…

Accepted Answer

Generally you can get the coordinates of a normal of a line like this:

```
P1 = {r * cos(a) + Cx, -r * sin(a) + Cy},
P2 = {-r * cos(a) + Cx, r * sin(a) + Cy}.
```

A demo applying this to your case at jsFiddle.

Javascript: Find point on perpendicular line always the same distance away

Solution

Problem