When I posted the code, I was strapped for time, hence…
This amended example does let “you know what the code does”. 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>untitled document</title>
<style media="screen">
html,body {
height:100%;
margin:0;
}
#box {
position:relative;
width:50%;
top:50px;
padding-top:31%;
border:1px solid #000;
box-sizing:border-box;
margin:0 auto 60px;
background-color:#ccc;
}
h1 {
text-align:center;
}
.changeCursor {
cursor:crosshair;
}
.hide {
display:none;
}
.show {
display:inline-block;
}
#holder {
position:fixed;
z-index:2;
bottom:10px;
left:10px;
}
#measure {
display:inline-block;
}
#info,#info1,#info2 {
min-width:52px;
padding:8px;
border:1px solid #000;
background-color:#ffc;
font-family:'courier new',monospace;
font-size:75%;
}
#svg {
position:absolute;
z-index:1;
top:0;
left:0;
width:100%;
height:100%;
}
#line {
stroke:rgb(0,0,0);
stroke-width:1;
}
</style>
</head>
<body>
<div id="box"></div>
<h1>Lorem Ipsum</h1>
<div id="holder">
<input id="measure" type="button" value="start measure">
<span id="info" class="hide">x1=0, y1=0</span>
<span id="info1" class="hide">x2=0, y2=0</span>
<span id="info2" class="hide">length=0</span>
</div>
<svg id="svg"><line id="line"></line></svg>
<script>
(function() {
'use strict';
var d=document,m=d.getElementById('measure'),
test=true,l=0,t=0,x=[],y=[],w,h,q,count=0,
obj=d.getElementById('info'),
obj1=d.getElementById('info1'),
obj2=d.getElementById('info2'),
line=d.getElementById('line');
x.push(l);
y.push(t);
m.onclick=function() {
if(test===true) {
d.body.className+=' changeCursor';
m.value='stop measure';
d.body.addEventListener('mousemove',curPos,false);
obj.className='show';
obj1.className='show';
obj2.className='show';
test=false;
}
else {
d.body.className=document.body.className.replace(' changeCursor','');
m.value='start measure';
d.body.removeEventListener('mousemove',curPos,false);
d.body.removeEventListener('click',curxy,false);
obj.className='hide';
obj1.className='hide';
obj2.className='hide';
test=true;
x=[0,0];
y=[0,0];
obj.firstChild.nodeValue='x1=0, y1=0';
obj1.firstChild.nodeValue='x2=0, y1=0';
obj2.firstChild.nodeValue='length=0';
line.setAttribute('x1',0);
line.setAttribute('x2',0);
line.setAttribute('y1',0);
line.setAttribute('y2',0);
count=0;
}
}
function curPos(e) {
d.body.addEventListener('click',curxy,false);
l=e.clientX
t=e.clientY;
}
function curxy() {
x.push(l);
y.push(t);
obj.firstChild.nodeValue='x1='+x[x.length-2]+'px, y1='+y[y.length-2]+'px';
obj1.firstChild.nodeValue='x2='+x[x.length-1]+'px, y1='+y[y.length-1]+'px';
q=Math.sqrt(Math.pow((x[x.length-1]-x[x.length-2]),2)+
Math.pow((y[y.length-1]-y[y.length-2]),2)
).toFixed(0);
obj2.firstChild.nodeValue='length='+q+'px';
if(count<1){
count++;
return;
}
line.setAttribute('x1',x[x.length-2]);
line.setAttribute('x2',x[x.length-1]);
line.setAttribute('y1',y[y.length-2]);
line.setAttribute('y2',y[y.length-1]);
}
})();
</script>
</body>
</html>
coothead
