Edit in JSFiddle

<canvas width="300" height="300"></canvas>
canvas {
  display: block;
  outline: 1px dashed #ccc;
}
const canvas = document.querySelector('canvas');
const canvasRect = canvas.getBoundingClientRect();
const ctx = canvas.getContext('2d');
const points = [];

const scaleFactor = 3; // 1px == 3m

ctx.font = '14px monospace';
ctx.fillText(`click on canvas`, 5, 20);

function joinPoints(points) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.moveTo(points[0].x, points[0].y);
  ctx.lineTo(points[1].x, points[1].y);
  ctx.stroke();

  const dist = Math.hypot(points[1].x - points[0].x, points[1].y - points[0].y) * scaleFactor;
  ctx.fillText(`dist: ${dist}m`, 5, 20);
}

function onMove(e) {
  const x = e.pageX - canvasRect.x;
  const y = e.pageY - canvasRect.y;
  joinPoints([points[0], { x, y }]);
}

function onClick(e) {
  switch (points.length) {
    case 0: {
      points[0] = {
        x: e.pageX - canvasRect.x,
        y: e.pageY - canvasRect.y,
      };

      canvas.addEventListener('mousemove', onMove);
      break;
    }

    case 1: {
      points[1] = {
        x: e.pageX - canvasRect.x,
        y: e.pageY - canvasRect.y,
      };
      canvas.removeEventListener('mousemove', onMove);
      joinPoints(points);
      break;
    }
  }
}

document.addEventListener('click', onClick);