HTML5 캔버스 더블클릭 시 텍스트 선택 현상 방지하는 방법

HTML5 캔버스 더블클릭 시 텍스트 선택 문제 해결하기

HTML5 캔버스를 사용하다 보면 캔버스 영역을 빠르게 두 번 클릭(더블클릭)할 때, 브라우저의 기본 동작으로 인해 주변 텍스트가 함께 선택되는 불편한 현상이 발생할 수 있습니다. 이는 캔버스 자체가 아닌 페이지의 다른 요소에 텍스트 선택이 적용되기 때문입니다.

이러한 문제를 간단하게 해결하려면 onselectstart 이벤트 핸들러를 활용하여 텍스트 선택 동작을 비활성화하면 됩니다.

해결 코드

var canvas1 = document.getElementById('c');
canvas1.onselectstart = function () {
    return false;
}

코드 설명

위 코드는 getElementById로 캔버스 요소를 가져온 뒤, onselectstart 이벤트가 발생했을 때 false를 반환하도록 설정합니다. 이렇게 하면 해당 캔버스에서 더블클릭을 하더라도 브라우저가 기본 텍스트 선택 동작을 수행하지 않게 됩니다.

주의 사항

이 방법은 캔버스가 페이지 전체 너비를 차지하지 않고 약 100픽셀 정도의 작은 크기일 때 특히 유용합니다. 캔버스가 좁으면 클릭 시 인접한 텍스트 요소까지 선택 범위에 포함될 가능성이 높아지기 때문입니다.

추가로, CSS를 활용해 user-select: none; 속성을 캔버스 또는 컨테이너 요소에 적용하는 방법도 함께 사용하면 더욱 확실하게 텍스트 선택을 방지할 수 있습니다.