JSFiddle - React, Tailwind, and code Playground

HTML

<div id="raphaelPanel"></div>

JavaScript

R = Raphael('raphaelPanel', 500, 500);

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

// Plot some test points to show the perpendicular line has been found
R.circle(100, (perpendicularSlope * 100) + yIntersect, 2);
R.circle(120, (perpendicularSlope * 120) + yIntersect, 2);
R.circle(140, (perpendicularSlope * 140) + yIntersect, 2);
R.circle(160, (perpendicularSlope * 160) + yIntersect, 2);
R.circle(180, (perpendicularSlope * 180) + yIntersect, 2);