JSFiddle - React, Tailwind, and code Playground

HTML

<p>
    Top diamond boundaries:
</p>
<div>Left: <input id="left" type="text" value="113"></div>
<div>Right: <input id="right" type="text" value="337"></div>
<div>Top: <input id="top" type="text" value="2"></div>
<div>Bottom: <input id="bottom" type="text" value="227"></div>
<p>
    Point coordinates:
</p>
<div>X: <input id="x" type="text" value="260"></div>
<div>Y: <input id="y" type="text" value="179"></div>
<p>
    <button onclick="doTest();">Test point</button>
</p>

CSS

p {
    margin: 10px 0px;
    font-weight: bold;
}

JavaScript

function doTest()
{
    function getValue(id)
    {
        return parseFloat(document.getElementById(id).value);
    }
    alert(testPoint([[getValue("left"), getValue("top")],
                     [getValue("right"), getValue("bottom")]],
                    [getValue("x"), getValue("y")]));
}

function testPoint(topDiamond, coords)
{
    function add(vector1, vector2)
    {
      return [vector1[0] + vector2[0], vector1[1] + vector2[1]];
    }

    function multiply(matrix, vector)
    {
      return [matrix[0][0] * vector[0] + matrix[0][1] * vector[1],
              matrix[1][0] * vector[0] + matrix[1][1] * vector[1]];
    }

    // Translation vector
    var translationVector = [-(topDiamond[0][0] + topDiamond[1][0]) / 2,
                             -topDiamond[0][1]];

    topDiamond = [add(topDiamond[0], translationVector),
                  add(topDiamond[1], translationVector)];

    // Rotation matrix
    var angle = -Math.atan2(topDiamond[1][1] - topDiamond[0][1],
                            topDiamond[1][0] - topDiamond[0][0]);
    var rotMatrix = [[Math.cos(angle), -Math.sin(angle)],
                     [Math.sin(angle), Math.cos(angle)]];

    // Shear matrix
    var point = [topDiamond[0][0], (topDiamond[0][1] + topDiamond[1][1]) / 2];
    point = multiply(rotMatrix, point);
    var shearMatrix = [[1, -point[0] / point[1]], [0, 1]];

    // Scale matrix
    point = multiply(shearMatrix, point);
    var point2 = [topDiamond[1][0], (topDiamond[0][1] + topDiamond[1][1]) / 2];
    point2 = multiply(rotMatrix, point2);
    point2 = multiply(shearMatrix, point2);
    var scaleMatrix = [[1/point2[0], 0], [0, 1/point[1]]];

    // All done, get the result
    return (
      multiply(scaleMatrix,
        multiply(shearMatrix,
          multiply(rotMatrix,
            add(translationVector, coords)
          )
        )
      )
    );
}