<pre></pre>

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

pre {
  margin: 0;
  padding: 20px;
  border-radius: 5px;
  display: block;
  font: 14px Consolas, monospace;
  line-height: 1.25;
  background: #222222;
  color: #ffffff;
  pointer-events: none;
  user-select: none;
}

const pre = document.querySelector('pre');
const mouse = {
  current: undefined,
  previous: undefined,
  start: undefined,
  end: undefined,
  isDown: false
};

const get = (object = {}, keys = []) => Object.fromEntries(keys.map(key => [key, object.hasOwnProperty(key) ? (Math.round(object[key] * 100) / 100) : null]));

const debug = () => {
  const current = get(mouse.current, ['x', 'y']);
  const previous = get(mouse.previous, ['x', 'y']);
  const start = get(mouse.start, ['x', 'y']);
  const end = get(mouse.end, ['x', 'y']);
  
  const lines = [
    [`Current  X: ${current.x}`, `Current  Y: ${current.y}`],
    [`Previous X: ${previous.x}`, `Previous Y: ${previous.y}`],
    [`Start    X: ${start.x}`, `Start    Y: ${start.y}`],
    [`End      X: ${end.x}`, `End      Y: ${end.y}`],
    [`Is Down: ${mouse.isDown}`]
  ];
  
  pre.textContent = lines.map(line => line
     .map(column => column.padEnd(20))
     .join('')
  ).join('\n');
};

const update = () => {
  debug();
  
  requestAnimationFrame(update);
};

update();

['touchstart', 'mousedown'].forEach(type => {
  window.addEventListener(type, event => {
    mouse.start = {
      x: (event.touches ? event.touches[0] : event).clientX,
      y: (event.touches ? event.touches[0] : event).clientY
    };
    mouse.isDown = true;
  }, { passive: true });
});

['touchend', 'touchcancel', 'mouseup'].forEach(type => {
  window.addEventListener(type, event => {
    const touches = event.touches.length > 0
      ? event.touches
      : event.changedTouches;
      
    if (touches && touches.length > 0) {
      mouse.end = {
        x: touches[0].clientX,
        y: touches[0].clientY
      }
    } else if (event.clientX !== undefined && event.clientY !== undefined) {
      mouse.end = {
        x: event.clientX,
        y: event.clientY
      };
    }
    mouse.isDown = false;
  }, { passive: true });
});

['touchmove', 'mousemove'].forEach(type => {
  window.addEventListener(type, event => {
    if (mouse.current !== undefined) {
      mouse.previous = {
        x: mouse.current.x,
        y: mouse.current.y
      };
    }

    mouse.current = {
      x: (event.touches ? event.touches[0] : event).clientX,
      y: (event.touches ? event.touches[0] : event).clientY
    };
  }, { passive: true });
});