[JS] 마우스 클릭 좌표 (feat. canvas)

JS 에서 2D로 화면에 그림을 그릴 때 canvas를 많이 활용한다.

이때 마우스 클릭의 좌표의 값을 체크하는데 기본적인 좌표값의 이름들을 알아보자.

 

중요도 순서

 

1. clientX, clientY

뷰포트를 기준으로 좌표를 표시한다.

스크롤바가 움직이더라도 마우스로 클릭한 clientX, clientY의 값은 바뀌지 않는다.

 

2. offsetX, offsetY

DOM을 기준으로 좌표를 표시한다.

React에서 useRef로 설정한 DOM 객체의 영역에서 왼쪽 상단 모서리 부분(0, 0)을 기준으로

offsetX와 offsetY 좌표값을 출력한다.

 

나머지 screenX, screenY

pageX, pageY도 있다.

 

추가 참고는 아래 링크

https://hianna.tistory.com/493