javascript - How to get the coordinates of the touch event in the canvas in native canvas?

Question

When canvas responds to the mousedown event, it can extract the internal coordinates of the element through event.offsetX and offsetY. Then I changed to touchstart and there is no offsetX and offsetY. Where should I find the internal coordinates of the element?

Answer 1

The algorithm processed in my canvas map library Sinomap is this (with changes):

// 注意这里是为 canvas 的 DOM 元素增加 Listener 而非 canvas 的 ctx
document
  .getElementById('my-canvas')
  .addEventListener('click', updateHandler, false)

function updateHandler (e) {
  // canvas 为你的 canvas ctx 变量
  const box = canvas.getBoundingClientRect()
  const mouseX = (e.clientX - box.left) * canvas.width / box.width
  const mouseY = (e.clientY - box.top) * canvas.height / box.height
  console.log([mouseX, mouseY])
}

Answer 2

Touch event, you need to get e.touches[0].pageX or other coordinates. As for touchend, for compatibility reasons, it is best to use e.changedTouches

Answer 3