[essere]

Дзен-трансгуманист,
Спасибо Вам ;]
Вот получилось вот такая красота:

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

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

        function getCoords(e)
        {

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

            if (coords.length === 4) {

                x1 = coords[0]; x2 = coords[2];
                y1 = coords[1]; y2 = coords[3];

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

                var perpHalfDX = -dy / 150 * 100;
                var perpHalfDY = +dx / 150 * 100;

        
                var perpX = (x1 + x2)/2;
                var perpY = (y1 + y2)/2;

                drawLine(perpX, perpY, perpX + perpHalfDX, perpY + perpHalfDY);

                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();  
    }