HTML5 캔버스 성능을 높이는 6가지 방법
HTML5 캔버스(Canvas)는 게임, 데이터 시각화, 인터랙티브 그래픽 등 실시간 렌더링이 필요한 작업에 널리 사용됩니다. 하지만 최적화 없이 사용하면 프레임이 끊기거나 반응 속도가 느려질 수 있습니다. 다음 기법들을 적용하면 캔버스의 실시간 성능을 눈에 띄게 개선할 수 있습니다.
1. 이미지 스무딩(Image Smoothing) 비활성화
이미지를 확대·축소할 때 브라우저가 자동으로 픽셀을 보간하는 기능은 연산 비용이 큽니다. ctx.imageSmoothingEnabled = false;로 설정하면 렌더링 속도가 빨라지고, 픽셀 아트 스타일의 선명한 화면도 얻을 수 있습니다.
2. 절반 해상도로 렌더링하기
캔버스 내부 해상도를 화면 표시 크기의 절반으로 낮추면 처리해야 할 픽셀 수가 약 75% 감소합니다. 이후 CSS로 원래 크기를 확장해 표시하면 시각적 품질 저하를 최소화하면서 성능을 크게 향상시킬 수 있습니다.
3. drawImage()로 메인 캔버스 업데이트
복잡한 요소는 오프스크린 캔버스(Off-screen Canvas)에 미리 그린 후, drawImage()를 사용해 메인 캔버스에 한 번에 복사하는 방식이 효율적입니다. 이렇게 하면 매 프레마다 모든 요소를 다시 그리는 비용을 줄일 수 있습니다.
4. 정수(Integer) 좌표와 크기 사용
소수점 좌표는 브라우저가 반픽셀(sub-pixel) 계산을 수행하게 만들어 성능을 저하시킵니다. Math.round()나 Math.floor()로 좌표와 크기를 정수로 변환하면 GPU 처리가 단순해져 렌더링이 빠르고 경계선도 또렷하게 표현됩니다.
5. requestAnimationFrame() 활용
setInterval() 대신 requestAnimationFrame()을 사용하세요. 이 API는 브라우저의 화면 재생 빈도(通常 초당 60회)에 맞춰 렌더링 타이밍을 조절하고, 탭이 비활성 상태일 때 자동으로 실행을 중단해 CPU와 배터리 소모를 줄여줍니다.
6. while 루프 적극적으로 사용
반복 작업에서 for문보다 while 루프가 미세하게 더 빠른 경우가 많습니다. 특히 픽셀 데이터 조작처럼 수만 번 반복되는 연산에서는 루프 구조의 차이가 전체 성능에 누적적인 영향을 주므로, 가능한 한 간결하고 가벼운 루프를 작성하는 것이 좋습니다.
마무리
위 기법들은 개별적으로도 효과가 있지만, 함께 적용할 때 최상의 결과를 얻습니다. 프로파링 도구로 병목 지점을 먼저 확인한 후, 해당 부분에 우선적으로 최적화를 적용하는 것이 효율적인 개발 순서입니다.