마우스 커서로 이미지를 사용할 때 마우스 클릭 좌표가 달라지는 문제

비주얼 에디터에서 도형을 추가할 때 마우스 클릭 지점보다 조금 위와 왼쪽에 도형이 추가되는 문제가 있습니다.

마우스 클릭으로 1직사각형 3오른쪽 아래에 맞추어 2선을 추가했지만 그보다 조금 위에 선이 그어지는 문제였습니다. 자바스크립트로 마우스 클릭 이벤트 좌표를 계산하는 것에 문제가 있을 것으로 예상했지만 원인을 찾지못했습니다.

그런데 도형 크기를 바꾸거나 위치를 이동할 때는 이 문제가 발생하지 않고 도형을 추가할 때만 이 문제가 발생한다는 것을 발견했습니다. 그 차이를 파악해보니 도형을 추가할 때 마우스 커서를 이미지()로 바꾸는 로직이 있었습니다.

document.body.style.cursor = "url('/resource/image/visual/cursor_add.png')";

마우스 커서로 이미지를 사용하면 그 이미지 크기의 절반만큼 마우스 클릭 좌표가 위와 왼쪽으로 이동했던 것입니다. 이 사실을 반영해서 코드를 수정하니 문제가 해결되었습니다.

마우스 커서로 이미지를 사용하는 것을 지원하는 크롬, 사파리, 파이어폭스에서는 모두 이런 현상이 나타났고, 마우스 커서로 이미지를 사용하는 것을 지원하지 않는 IE 9에서는 이런 현상이 나타나지 않았습니다.