francho · December 11, 2014 11:11
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        canvas {
            border: 1px solid darkgray;
        }
        .box {
            display: inline-block;
            border: 1px solid darkgray;
            width: 150px;
            height: 150px;
            margin: 50px;
        }

        .col1, .col2 {
            width: 250px;
            display: inline-block;
        }

        .col2 {
            float: left;
        }

        #boxA {
            background-color: lightgreen;
        }

        #boxB {
            background-color: lightblue;
        }

        #boxC {
            background-color: lightcoral;
        }

        #boxD {
            background-color: lightgoldenrodyellow;
        }

        #boxE {
            background-color: lightslategray;
        }

        #boxF {
            background-color: lightsteelblue;
        }

        #boxG {
            background-color: lightpink;
        }
    </style>


    <script>

        function drawLineXY(fromXY, toXY) {
            console.log(fromXY, toXY);

            var leftpoint, rightpoint;
            if(fromXY.x < toXY.x) {
                leftpoint = fromXY;
                rightpoint = toXY;
            } else {
                leftpoint = toXY;
                rightpoint = fromXY;
            }

            var lineWidthPix = 4;
            var gutterPix = 10;
            var origin = {x: leftpoint.x - gutterPix, y: Math.min(fromXY.y, toXY.y) - gutterPix};
            console.log(origin);

            lineElem.width = Math.max(lineElem.width, Math.max(rightpoint.x - leftpoint.x, lineWidthPix) + 2.0 * gutterPix);
            lineElem.height = Math.max(lineElem.height, Math.abs(fromXY.y - toXY.y) + 2.0 * gutterPix);

            lineElem.style.left = Math.min(lineElem.style.left, origin.x);
            lineElem.style.top = Math.min(lineElem.style.top, origin.y);
            console.log('top:' + lineElem.style.top + ' left: ' +lineElem.style.left );

            var ctx = lineElem.getContext('2d');
            ctx.lineWidth = 4;
            ctx.strokeStyle = '#09f';
            ctx.beginPath();
            ctx.moveTo(fromXY.x - origin.x, fromXY.y - origin.y);
            ctx.lineTo(toXY.x - origin.x, toXY.y - origin.y);
            ctx.stroke();
        }

        function getCentreOfElementById(id) {
            var el = document.getElementById(id);
            var bounds = el.getBoundingClientRect();
            return {
                x: bounds.left + bounds.width / 2.0,
                y: bounds.top + bounds.height / 2.0
            };
        }


        function draw() {
            var ctx = lineElem.getContext('2d');
            ctx.save();
            ctx.setTransform(1, 0, 0, 1, 0, 0);
            ctx.clearRect(0, 0, lineElem.width, lineElem.height);
            ctx.restore();

            drawLineXY(getCentreOfElementById('boxA'), getCentreOfElementById('boxD'));
            drawLineXY(getCentreOfElementById('boxA'), getCentreOfElementById('boxG'));
        }


        var lineElem, enableTimer;
        function onLoad() {
            lineElem = document.createElement('canvas');
            lineElem.style.position = "absolute";
            lineElem.style.zIndex = -100;
            lineElem.style.left='9999';
            lineElem.style.top='9999';

            document.body.appendChild(lineElem);

            draw();

            window.addEventListener('scroll', function() {
                clearTimeout(enableTimer);
                enableTimer = setTimeout(draw, 10);
            }, false);
        }
    </script>

 </head>
 <body onload="onLoad()">

 <div class="col1">
    <div id="boxA" class="box">A</div>
    <div id="boxB" class="box">B</div>
 </div>
 <div class="col2">
    <div id="boxC" class="box">C</div>
    <div id="boxD" class="box">D</div>
    <div id="boxE" class="box">E</div>
    <div id="boxF" class="box">F</div>
    <div id="boxG" class="box">G</div>
    <div id="boxH" class="box">H</div>
 </div>


 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<style>
	canvas {
	border: 1px solid darkgray;
	}
	.box {
	display: inline-block;
	border: 1px solid darkgray;
	width: 150px;
	height: 150px;
	margin: 50px;
	}

	.col1, .col2 {
	width: 250px;
	display: inline-block;
	}

	.col2 {
	float: left;
	}

	#boxA {
	background-color: lightgreen;
	}

	#boxB {
	background-color: lightblue;
	}

	#boxC {
	background-color: lightcoral;
	}

	#boxD {
	background-color: lightgoldenrodyellow;
	}

	#boxE {
	background-color: lightslategray;
	}

	#boxF {
	background-color: lightsteelblue;
	}

	#boxG {
	background-color: lightpink;
	}
	</style>


	<script>

	function drawLineXY(fromXY, toXY) {
	console.log(fromXY, toXY);

	var leftpoint, rightpoint;
	if(fromXY.x < toXY.x) {
	leftpoint = fromXY;
	rightpoint = toXY;
	} else {
	leftpoint = toXY;
	rightpoint = fromXY;
	}

	var lineWidthPix = 4;
	var gutterPix = 10;
	var origin = {x: leftpoint.x - gutterPix, y: Math.min(fromXY.y, toXY.y) - gutterPix};
	console.log(origin);

	lineElem.width = Math.max(lineElem.width, Math.max(rightpoint.x - leftpoint.x, lineWidthPix) + 2.0 * gutterPix);
	lineElem.height = Math.max(lineElem.height, Math.abs(fromXY.y - toXY.y) + 2.0 * gutterPix);

	lineElem.style.left = Math.min(lineElem.style.left, origin.x);
	lineElem.style.top = Math.min(lineElem.style.top, origin.y);
	console.log('top:' + lineElem.style.top + ' left: ' +lineElem.style.left );

	var ctx = lineElem.getContext('2d');
	ctx.lineWidth = 4;
	ctx.strokeStyle = '#09f';
	ctx.beginPath();
	ctx.moveTo(fromXY.x - origin.x, fromXY.y - origin.y);
	ctx.lineTo(toXY.x - origin.x, toXY.y - origin.y);
	ctx.stroke();
	}

	function getCentreOfElementById(id) {
	var el = document.getElementById(id);
	var bounds = el.getBoundingClientRect();
	return {
	x: bounds.left + bounds.width / 2.0,
	y: bounds.top + bounds.height / 2.0
	};
	}


	function draw() {
	var ctx = lineElem.getContext('2d');
	ctx.save();
	ctx.setTransform(1, 0, 0, 1, 0, 0);
	ctx.clearRect(0, 0, lineElem.width, lineElem.height);
	ctx.restore();

	drawLineXY(getCentreOfElementById('boxA'), getCentreOfElementById('boxD'));
	drawLineXY(getCentreOfElementById('boxA'), getCentreOfElementById('boxG'));
	}


	var lineElem, enableTimer;
	function onLoad() {
	lineElem = document.createElement('canvas');
	lineElem.style.position = "absolute";
	lineElem.style.zIndex = -100;
	lineElem.style.left='9999';
	lineElem.style.top='9999';

	document.body.appendChild(lineElem);

	draw();

	window.addEventListener('scroll', function() {
	clearTimeout(enableTimer);
	enableTimer = setTimeout(draw, 10);
	}, false);
	}
	</script>

	</head>
	<body onload="onLoad()">

	<div class="col1">
	<div id="boxA" class="box">A</div>
	<div id="boxB" class="box">B</div>
	</div>
	<div class="col2">
	<div id="boxC" class="box">C</div>
	<div id="boxD" class="box">D</div>
	<div id="boxE" class="box">E</div>
	<div id="boxF" class="box">F</div>
	<div id="boxG" class="box">G</div>
	<div id="boxH" class="box">H</div>
	</div>


	</body>
	</html>