1var fromX, fromY;
2var svg = document.createElementNS ('http://www.w3.org/2000/svg',"svg");
3svg.setAttribute("style", "position: absolute; top:0;left:0;height: " + document.body.clientHeight + "px;width: 100%");
4var line = document.createElementNS('http://www.w3.org/2000/svg','line');
5line.setAttribute("style", "stroke-width: 4; stroke: red");
6
7svg.appendChild(line);
8document.body.appendChild(svg);
9
10document.body.addEventListener("mousedown", function (e) {
11  fromX = e.pageX;
12  fromY = e.pageY;
13});
14
15document.body.addEventListener("mousemove", function (e) {
16  if (fromX === undefined) {
17    return;
18  }
19
20  line.setAttribute("x1", fromX);
21  line.setAttribute("x2", e.pageX);
22  line.setAttribute("y1", fromY);
23  line.setAttribute("y2", e.pageY);
24
25  console.log(
26    [fromX, fromY], " to ", [e.pageX, e.pageY], "Distance:",
27    Math.sqrt(Math.pow(fromX - e.pageX, 2) + Math.pow(fromY - e.pageY, 2))
28  );
29});
30
31document.body.addEventListener("mouseup", function (e) {
32  fromX = undefined;
33  fromY = undefined;
34});
35