tmcw/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Canvas Warp</title>
    <style type="text/css" title="text/css">
        body { background-color: #eee; margin:0; padding:0; }
        .handle {
            width:10px;
            height:10px;
            margin-left:-5px;
            margin-top:-5px;
            background:#000;
            position:absolute;
        }
        #lenna {
            position:absolute;
        }
    </style>
</head>
<body>
    <img src='http://www.cs.cmu.edu/~chuck/lennapg/len_std.jpg' id='lenna' />
    <script type="text/javascript">
       /** Solves a system of linear equations.

        t1 = (a * r1) + (b + s1) + c
        t2 = (a * r2) + (b + s2) + c
        t3 = (a * r3) + (b + s3) + c

        r1 - t3 are the known values.
        a, b, c are the unknowns to be solved.
        returns the a, b, c coefficients.
        */
        var img = document.getElementById('lenna');
        function linearSolution(r1, s1, t1, r2, s2, t2, r3, s3, t3) {
            var a = (((t2 - t3) * (s1 - s2)) - ((t1 - t2) * (s2 - s3))) /
                    (((r2 - r3) * (s1 - s2)) - ((r1 - r2) * (s2 - s3))),
                b = (((t2 - t3) * (r1 - r2)) - ((t1 - t2) * (r2 - r3))) /
                    (((s2 - s3) * (r1 - r2)) - ((s1 - s2) * (r2 - r3))),
                c = t1 - (r1 * a) - (s1 * b);
            return [a, b, c];
        }

        var w = 256;
        var h = 256;

        var corners = [
            [0, 0],
            [256, 0],
            [0, 256]];

        function click(e) {
            if (!e.shiftKey) {
                corners[1] = [e.clientX, e.clientY];
            }
            else {
                corners[2] = [e.clientX, e.clientY];
            }
            e.preventDefault();
            draw();
            return false;
        }

        window.addEventListener('mousedown', click);
        img.style.webkitTransformOrigin = '0 0';

        function draw() {
            xm = linearSolution(0, 0, corners[0][0], w, 0, corners[1][0], 0, h, corners[2][0]);
            ym = linearSolution(0, 0, corners[0][1], w, 0, corners[1][1], 0, h, corners[2][1]);
            img.style.webkitTransform = 'matrix(' +
                [xm[0], ym[0], xm[1], ym[1], xm[2], ym[2]] + ')';
        }
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Canvas Warp</title>
	<style type="text/css" title="text/css">
	body { background-color: #eee; margin:0; padding:0; }
	.handle {
	width:10px;
	height:10px;
	margin-left:-5px;
	margin-top:-5px;
	background:#000;
	position:absolute;
	}
	#lenna {
	position:absolute;
	}
	</style>
	</head>
	<body>
	<img src='http://www.cs.cmu.edu/~chuck/lennapg/len_std.jpg' id='lenna' />
	<script type="text/javascript">
	/** Solves a system of linear equations.

	t1 = (a * r1) + (b + s1) + c
	t2 = (a * r2) + (b + s2) + c
	t3 = (a * r3) + (b + s3) + c

	r1 - t3 are the known values.
	a, b, c are the unknowns to be solved.
	returns the a, b, c coefficients.
	*/
	var img = document.getElementById('lenna');
	function linearSolution(r1, s1, t1, r2, s2, t2, r3, s3, t3) {
	var a = (((t2 - t3) * (s1 - s2)) - ((t1 - t2) * (s2 - s3))) /
	(((r2 - r3) * (s1 - s2)) - ((r1 - r2) * (s2 - s3))),
	b = (((t2 - t3) * (r1 - r2)) - ((t1 - t2) * (r2 - r3))) /
	(((s2 - s3) * (r1 - r2)) - ((s1 - s2) * (r2 - r3))),
	c = t1 - (r1 * a) - (s1 * b);
	return [a, b, c];
	}

	var w = 256;
	var h = 256;

	var corners = [
	[0, 0],
	[256, 0],
	[0, 256]];

	function click(e) {
	if (!e.shiftKey) {
	corners[1] = [e.clientX, e.clientY];
	}
	else {
	corners[2] = [e.clientX, e.clientY];
	}
	e.preventDefault();
	draw();
	return false;
	}

	window.addEventListener('mousedown', click);
	img.style.webkitTransformOrigin = '0 0';

	function draw() {
	xm = linearSolution(0, 0, corners[0][0], w, 0, corners[1][0], 0, h, corners[2][0]);
	ym = linearSolution(0, 0, corners[0][1], w, 0, corners[1][1], 0, h, corners[2][1]);
	img.style.webkitTransform = 'matrix(' +
	[xm[0], ym[0], xm[1], ym[1], xm[2], ym[2]] + ')';
	}
	</script>
	</body>
	</html>