const $test = document.querySelector('.test');

function sleep() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve();
    }, 300);
  });
}
$test.addEventListener('mousedown', async e => {
  console.log(e.offsetX, e.offsetY); // (90, 163) any other values but not 0
  await sleep();
  console.log(e.offsetX, e.offsetY); // 0 0
});

#app {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.test {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background-color: aqua;
}

<div id="app">
  <div class="test"></div>
  <!-- <canvas width="300" height="300" class="test"></canvas> -->
</div>