[解決済み】キャンバス要素でマウスをクリックしたときの座標を取得するには？[重複しています]。

質問

canvas 要素にクリックイベントハンドラを追加して、クリックの x および y 座標（canvas 要素からの相対座標）を返すようにする最も簡単な方法は何でしょうか？

レガシーブラウザとの互換性は必要なく、Safari、Opera、Firefoxで十分です。

解決するには？

もしあなたがシンプルさを好み、なおかつクロスブラウザの機能が欲しいのであれば、私はこの解決策が最も効果的であると感じました。これは @Aldekein´s の解決策を単純化したものです。 jQueryなし .

function getCursorPosition(canvas, event) {
    const rect = canvas.getBoundingClientRect()
    const x = event.clientX - rect.left
    const y = event.clientY - rect.top
    console.log("x: " + x + " y: " + y)
}

const canvas = document.querySelector('canvas')
canvas.addEventListener('mousedown', function(e) {
    getCursorPosition(canvas, e)
})