JavaScript中的矢量投影

Question

我正在研究几何图形计算器something like this。如果在“线条”工具部分中选择“线段”工具并绘制线条，然后在“构造工具”部分中选择“垂直线”，这将是我需要做的。

    len = 2500; // Length of perpendicular line
    vecA = {x1, y1}; // X, Y of mouse position
    vecB = {x2, y2}; // X, Y of vector B
    vecX = vecA.y - vecB.y;
    vecY = vecB.x - vecA.x;
    len = len / Math.sqrt(vecX * vecX + vecY * vecY);
    vecX *= len;
    vecY *= len;

    ctx.save();
    ctx.setLineDash([10, 2]);
    ctx.strokeStyle = 'rgba(0,0,0,0.5)';
    ctx.fillStyle = 'rgba(0,0,0,0.5)';
    ctx.lineWidth = this.strokeWidth.axis;
    ctx.beginPath();
    ctx.moveTo(vecA.x + vecX, vecA.y + vecY);
    ctx.lineTo(vecA.x - vecX, vecA.y - vecY);
    ctx.stroke();
    ctx.restore();

问题是我在数学上非常糟糕，并且不知道如何在JavaScript函数中转换Vector投影公式。 现在，如果我单击初始线，我会得到垂直线，但仅当我移动鼠标X轴时。

我真的很感激任何帮助。谢谢。