캔버스 회전 시 좌표 변환이 필요한 이유
HTML5 캔버스(Canvas)로 작업하다 보면 캔버스 자체를 회전해야 하는 상황이 자주 발생합니다. 문제는 캔버스가 회전하면 내부 좌표계도 함께 회전한다는 점입니다. 즉, 마우스 클릭 위치나 특정 지점의 좌표를 그대로 사용하면 실제 화면상의 위치와 어긋나게 됩니다.
따라서 캔버스에 적용한 회전 변환(rotation transform)과 동일한 변환을 해당 점의 좌표에도 적용해 주어야 정확한 위치를 계산할 수 있습니다.
Transform 클래스로 회전 후 점 감지하기
이 문제를 해결하는 가장 깔끔한 방법은 캔버스에 적용한 변환을 그대로 재현하는 Transform 클래스를 만드는 것입니다. 캔버스에 수행한 모든 변환(회전, 이동, 확대·축소 등)을 이 클래스에도 똑같이 적용하면, 어떤 점이든 회전된 좌표계 기준으로 정확하게 변환할 수 있습니다.
var t = new Transform();
console.log(t.transformPoint(5, 6)); // 변환 전: [5, 6] — 원래 좌표 그대로 반환
t.rotate(1); // 캔버스에 적용한 것과 동일한 회전 변환 적용 (1라디안)
console.log(t.transformPoint(5, 6)); // 변환 후: [-2.347, 7.449]코드 동작 원리
위 예제의 흐름을 단계별로 살펴보면 다음과 같습니다.
- 변환 전:
t.transformPoint(5, 6)는 아무 변환이 없으므로 입력값인[5, 6]을 그대로 반환합니다. - 회전 적용:
t.rotate(1)은 캔버스에 적용했던 회전과 동일하게 1라디안(약 57.3°)만큼 회전시킵니다. - 변환 후: 같은 점
(5, 6)이 회전된 좌표계에서는 약[-2.347, 7.449]로 계산됩니다. 이는 표준 회전 공식x' = x·cosθ − y·sinθ,y' = x·sinθ + y·cosθ를 따른 결과입니다.
실무 활용 팁
이 기법은 특히 회전된 캔버스 위에서 마우스 클릭 지점을 감지해야 할 때 유용합니다. 마우스 이벤트로 얻은 화면 좌표를 transformPoint()에 넣어 역산하면, 회전된 캔버스 내부의 실제 논리 좌표를 구할 수 있습니다. 게임 오브젝트 충돌 판정, 이미지 편집기의 선택 영역 처리 등에서 널리 활용되는 패턴이니, 캔버스 변환 작업 시 하나의 유틸리티 클래스로 만들어 두면 재사용성이 크게 높아집니다.