서론

Konva를 이용해 캔버스 기반의 편집기를 개발하며, HTML 요소와 Canvas 요소 간의 좌표 차이 때문에 발생했던 문제점들에 대해 작성해보려고 한다. 특히 사용자가 보는 위치와 실제 Canvas에서 인지하는 위치가 달라서 예상치 못한 결과를 자주 발생하였다. 따라서 좌표 차이가 왜 발생하는지, 어떠한 문제들이 있었는지에 대해 정리해 보려고 한다.

Canvas와 HTML 좌표의 근본적인 차이

결론적으로 말하자면 Canvas와 HTML은 서로 다른 좌표계를 사용하기 때문에 위치 계산 시 오차가 발생하는 건 당연하다.

1. 좌표계 단위의 차이

• Canvas는 Canvas 픽셀(canvas coordinate)을, HTML/CSS는 **CSS 픽셀(CSS coordinate)**을 사용한다. 또한 브라우저 확대 및 디바이스의 픽셀 밀도(devicePixelRatio)가 다를 경우 추가적인 오차가 발생한다.

2. Konva의 scale 적용 방식

Konva에서의 scale은 Canvas의 컨텍스트 레벨에서 적용된다. 반면, HTML 요소는 DOM/CSS의 transform 속성을 통해 위치가 변경됩니다.

3. Container의 padding과 border

<Stage> 요소의 부모 컨테이너에 padding이나 border가 있으면 추가적인 오프셋 보정이 필요하다

4. 스크롤과 뷰포트의 영향

• HTML의 위치 계산 : 뷰포트를 기준
• Konva의 getClientRect() : DOM에서 실제 렌더링된 영역을 기준

5. CSS 레이아웃 중심 정렬

Flexbox를 사용해 부모 컨테이너에

display: flex;
justify-content: center;
align-items: center;>

같은 속성을 적용하면, Canvas(Stage)는 부모 내부의 중앙에 위치하지만, HTML 오버레이(position: absolute)는 이 Flex 컨테이너를 기준으로 다시 보정해야 한다.

부모 컨테이너의 크기나 padding, margin에 따라 추가적인 X/Y 오프셋이 발생하면서 오버레이가 어긋날 수 있다.