JSFiddle - React, Tailwind, and code Playground

by soulwire

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Perspective Transform Visualization</title>
    <style>
        body { background: #222; color: white; text-align: center; font-family: sans-serif; }
        canvas { background: rgba(255,255,255,0.1); display: block; margin: 20px auto; }
        #target {
            position: absolute;
            width: 200px;
            height: 200px;
            background: rgba(0, 255, 0, 0.5);
            border: 2px solid lime;
            transform-origin: 0 0;
        }
    </style>
</head>
<body>

<h1>Perspective Transform Visualization</h1>
<canvas id="canvas" width="400" height="400"></canvas>
<div id="target"></div>

<script>
function computeHomography(src, dst) {
    let A = [];
    for (let i = 0; i < 4; i++) {
        let { x, y } = src[i];
        let { x: x1, y: y1 } = dst[i];
        
        A.push([x, y, 1, 0, 0, 0, -x * x1, -y * x1, -x1]);
        A.push([0, 0, 0, x, y, 1, -x * y1, -y * y1, -y1]);
    }

    let h = solveLinearSystem(A);
    return [
        h[0], h[1], h[2],
        h[3], h[4], h[5],
        h[6], h[7], 1
    ];
}

function homographyToCSSMatrix(H) {
    return [
        H[0], H[3], 0, H[6],  
        H[1], H[4], 0, H[7],  
        0,    0,    1,    0,  
        H[2], H[5], 0,    1   
    ];
}

function solveLinearSystem(A) {
    let m = A.length, n = A[0].length;
    let X = new Array(n).fill(0);
    
    for (let i = 0; i < m; i++) {
        let maxRow = i;
        for (let k = i + 1; k < m; k++) {
            if (Math.abs(A[k][i]) > Math.abs(A[maxRow][i])) {
                maxRow = k;
            }
        }
        [A[i], A[maxRow]] = [A[maxRow], A[i]];
        
        for (let k = i + 1; k < m; k++) {
            let factor = A[k][i] / A[i][i];
            for (let j = i; j < n; j++) {
                A[k][j] -= A[i][j] * factor;
            }
        }
    }
    
    for (let i =...