[essere]

// половинный вектор перпендикуляра
var perpHalfDX = -dy / lineLen * perpLen / 2;
var perpHalfDY = +dx / lineLen * perpLen / 2;

...


// перпендикуляр

ctx.beginPath();
ctx.moveTo( midX - perpHalfDX, midY - perpHalfDY );
ctx.lineTo( midX + perpHalfDX, midY + perpHalfDY );
ctx.stroke();

Да это я пробовал:

var coords = [];
    var perps = [];

    var ctx = document.getElementById("myCanvas").getContext("2d");

        function getCoords(e)
        {
            //alert(e.clientX + " на " + e.clientY);

            drawCircle(e.clientX, e.clientY, 3);
                
            coords.push(e.clientX, e.clientY);

            if (coords.length === 4) {
                x1 = coords[0]; y1 = coords[2];
                x2 = coords[1]; y2 = coords[3];

                var dx = x2 - x1;
                var dy = y2 - y1;
                var lineLen = Math.sqrt( dx * dx + dy * dy );

                var perpHalfDX = -dy / lineLen * perpLen / 2;
                var perpHalfDY = +dx / lineLen * perpLen / 2;

        
                var perpX = (x1 + y1)/2;
                var perpY = (x2 + y2)/2;
                
                ctx.beginPath();
                ctx.moveTo( perpX - perpHalfDX, perpY - perpHalfDY );
                ctx.lineTo( perpX + perpHalfDX, perpY + perpHalfDY );
                ctx.stroke();

                drawCircle(perpX, perpY, 3);

                //drawLine(perpX, perpY, perpX+200, perpY+200);
                drawLine(coords[0], coords[1], coords[2], coords[3]);
                coords = [];

            }
        }


    function drawLine(x_first, y_first, x_second, y_second) 
    {
        ctx.beginPath();   
        ctx.moveTo( x_first, y_first );
        ctx.lineTo( x_second, y_second );
        ctx.lineWidth = 2; 
        ctx.stroke();
    }

    function drawCircle(x, y, radius) 
    {
        ctx.beginPath();  
        ctx.arc(x, y, radius, 0, Math.PI*2, false);  
        ctx.closePath();  
        ctx.fill();  
    }

    $(document).ready(function() 
    {  
        //drawLine(100, 100, 250, 300);
         //var canvas = document.getElementById("myCanvas");  
         //var ctx = canvas.getContext("2d");  
         //...
    });

Только не работает оно.
Математика чертова ;[