HTML5 Canvas에서 mousedown·mouseup 이벤트 처리하는 방법

HTML5 Canvas에서 드래그나 클릭 같은 마우스 상호작용을 구현할 때는 mousedown(마우스 버튼 누름)과 mouseup(마우스 버튼 뗌) 이벤트를 함께 처리해야 합니다. 핵심 원리는 간단합니다. 버튼이 눌리는 순간 상태 변수를 true로 설정하고, 버튼이 떼어질 때 이 값을 확인한 뒤 다시 false로 초기화하는 패턴을 사용합니다.

기본 구현 예제

var mouseDown = false;

// mousedown 이벤트 처리
canvas.onmousedown = function(event) {
    dragOffset.x = event.clientX - mainLayer.trans.x;
    dragOffset.y = event.clientY - mainLayer.trans.y;
    mouseDown = true;
};

// mouseup 이벤트 처리
canvas.onmouseup = function(event) {
    if (mouseDown) {
        mouseClick(event);
    }
    mouseDown = false;
};

코드 동작 원리

1. 상태 플래그 관리

변수 mouseDown은 현재 마우스 버튼이 눌려 있는지 여부를 저장하는 플래그입니다. mousedown 이벤트가 발생하면 true가 되고, mouseup이 발생하면 다시 false로 돌아갑니다.

2. 드래그 오프셋 계산

mousedown 시점에 마우스 좌표에서 캔버스 레이어의 변환(transformation) 값을 빼면, 드래그 시작점에 대한 상대적 오프셋을 구할 수 있습니다. 이 값은 이후 요소를 부드럽게 끌어다 놓는(drag & drop) 로직의 기준점으로 활용됩니다.

3. 클릭 판별

mouseup 핸들러에서는 mouseDown이 true였는지 먼저 확인합니다. 이렇게 하면 캔버스 밖에서 버튼을 누른 채 들어와 떼는 경우처럼 실제 클릭이 아닌 상황에서 mouseClick()이 호출되는 것을 방지할 수 있습니다.

실전 개선 팁

• addEventListener 사용: onmousedown 속성 대신 canvas.addEventListener('mousedown', handler)를 사용하면 여러 핸들러를 등록할 수 있고 코드 관리도 훨씬 유연해집니다.
• 정확한 좌표 얻기: event.clientX와 event.clientY는 뷰포트 기준 좌표입니다. 캔버스 내부 좌표가 필요하다면 getBoundingClientRect()를 활용해 캔버스 위치만큼 보정해 주세요.
• mouseleave 처리: 마우스가 캔버스 밖으로 나간 상태에서 버튼이 떼어지는 경우를 대비해, mouseleave 이벤트에서도 mouseDown = false로 설정해 두는 것이 안전합니다.

이 패턴은 캔버스 기반 그리기 도구, 게임, 인터랙티브 차트 등 마우스 조작이 필요한 거의 모든 HTML5 Canvas 애플리케이션의 기초가 되므로 반드시 익혀두시기 바랍니다.