HTML5 Canvas 선이 흐릿해지는 원인
HTML5 Canvas에 그린 직선이 흐릿하게 보이는 가장 큰 이유는 픽셀 격자(pixel grid)와 좌표의 정렬 문제 때문입니다. Canvas는 픽셀 단위로 렌더링되기 때문에, 선의 좌표가 정수 값(예: 20)에 위치하면 선 경계가 두 개의 픽셀에 걸쳐 렌더링되어 경계선이 번져 보이게 됩니다.
이 문제를 해결하려면 좌표를 반 픽셀(half-pixel) 단위로 조정하여 픽셀을 정확히 겹치도록 만들어 주면 됩니다.
방법 1: 반 픽셀 좌표 사용하기
선의 좌표 값을 소수점 아래 .5 단위로 변경하면 선이 픽셀 격자에 정확히 맞춰지면서 선명하게 표시됩니다.
context.moveTo(20.5, 0); context.lineTo(20.5, 50);
위 코드처럼 x 좌표를 20 대신 20.5로 지정하면, 1픽셀 너비의 선이 하나의 픽셀 열에 정확히 그려져 훨씬 또렷한 결과를 얻을 수 있습니다.
방법 2: 캔버스 실제 크기와 화면 표시 크기 일치시키기
흐릿함의 또 다른 원인은 캔버스의 실제 해상도(width/height 속성)와 CSS로 지정한 표시 크기(style)가 서로 다를 때 발생합니다. 두 크기가 다르면 브라우저가 캔버스를 확대 또는 축소하면서 이미지가 부드럽게 처리되어 선이 흐려집니다.
먼저 캔버스 요소를 가져온 뒤 실제 width와 height 속성을 설정합니다.
canvas1 = document.getElementById('canvas');
canvas1.width = 250;
canvas1.height = 250;그다음 CSS 스타일 크기를 실제 크기와 동일하게 맞춰 줍니다.
canvas1.style.width = "250px"; canvas1.style.height = "250px";
이렇게 하면 캔버스가 확대·축소 없이 원본 해상도 그대로 렌더링되므로 선과 도형이 선명하게 유지됩니다.
정리
- 1px 선을 그릴 때는 좌표를 .5 단위(예: 20.5)로 지정해 픽셀 격자에 정렬합니다.
- 캔버스의 width/height 속성과 CSS 크기를 동일한 값으로 설정해 불필요한 스케일링을 방지합니다.
- 고해상도(Retina) 디스플레이를 고려한다면 devicePixelRatio를 활용해 캔버스 해상도를 배율만큼 늘리는 것도 좋은 방법입니다.