[Javascript] HTML5 Canvas 클릭시 마우스 위치 알아내기

물론 스크린 기준이 아닌 Canvas 엘리먼트 기준으로 위치를 알아낼 수 있다. 구글링해보면 되게 복잡하게 Canvas 엘리먼트 위치, 크기, 스크린 크기 이용해서 계산하는데, addEventListener 메서드로 이벤트를 바인딩 한다음에 콜백에서 넘어오는 Event 변수를 사용하면 간단하다.

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <script>

      function ready() {

        var canvas = document.getElementById("canvas");
        canvas.addEventListener("click", function(e) {
          console.log({x: e.layerX, y: e.layerY});
        });

      }

    </script>
  </head>

  <body onload="ready()">
    <canvas id="canvas" width="500" height="500" style="border:1px solid red;"></canvas>
  </body>
</html>

이런 소스코드가 있다. 자바스크립트를 살펴보면,

canvas.addEventListener("click", function(e) {
  console.log({x: e.layerX, y: e.layerY});
});

addEventListener 를 사용하여 canvas 에 click 이벤트 리스너를 생성해 줬는데, 콜백으로 넘어오는 함수에 e 라는 파라미터가 존재한다. 이것의 layerX 와 layerY 라는 멤버 변수에는 마우스 클릭 이벤트 발생시 엘리먼트 기준의 마우스 좌표가 담겨 있다.

스크린샷 2015-12-13 오후 4.31.42