title: Javascript: Find point on perpendicular line always the same distance away
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>Take a look at this JSFiddle which shows the original line, with some points plotted along the perpendicular line: </p>
  
  <p><a href="http://jsfiddle.net/eLxcB/1/" rel="nofollow">http://jsfiddle.net/eLxcB/1/</a>. </p>
  
  <p>If you change the start and end points, you can see these plotted points getting closer together or further away.</p>
  
  <p>How do I get them to be uniformly the same distance apart from each other no matter what the angle is?</p>
  
  <p>Code snippit below:</p>
  
  <pre><code>// Start and end points
  var startX = 120
  var startY = 150
  var endX = 180
  var endY = 130
  
  // Calculate how far above or below the control point should be
  var centrePointX = ((startX + endX) / 2);
  var centrePointY = ((startY + endY) / 2);
  
  // Calculate slopes and Y intersects
  var lineSlope = (endY - startY) / (endX - startX);
  var perpendicularSlope = -1 / lineSlope;
  var yIntersect = centrePointY - (centrePointX * perpendicularSlope);
  
  // Draw a line between the two original points
  R.path('M '+startX+' '+startY+', L '+endX+' '+endY);
  </code></pre>