웹에서 그래픽을 다룰 때 자주 사용되는 HTML의 <canvas> 요소는 무제한으로 크기를 설정할 수 있는 것이 아닙니다. 모든 웹 브라우저는 캔버스의 너비(width), 높이(height), 그리고 전체 면적(area)에 각각 상한선을 두고 있습니다.
따라서 고해상도 이미지 처리나 대형 그래픽 작업을 수행할 때는 사용 중인 브라우저의 최대 크기 제한을 반드시 확인해야 합니다. 이 한도를 초과하면 캔버스가 정상적으로 렌더링되지 않거나 빈 화면만 표시될 수 있습니다.
브라우저별 canvas 최대 크기
Google Chrome
크롬에서 허용되는 캔버스의 최대 너비와 높이는 각각 32,767픽셀입니다. 다만 너비와 높이를 곱한 전체 면적은 268,435,456픽셀(16,384 × 16,384)을 초과할 수 없습니다.
Firefox
파이어폭스 역시 최대 너비와 높이는 각각 32,767픽셀로 크롬과 동일하지만, 허용되는 최대 면적은 472,907,776픽셀(21,760 × 21,736)로 더 넓습니다. 대면적 캔버스가 필요한 프로젝트라면 파이어폭스가 상대적으로 유리합니다.
Internet Explorer(IE)
구형 브라우저인 인터넷 익스플로러의 경우 최대 너비와 높이가 각각 8,192픽셀로 제한됩니다. 크롬이나 파이어폭스에 비해 훨씬 작은 값이므로, IE를 지원해야 하는 환경이라면 캔버스 크기 설계에 특히 주의해야 합니다.
IE Mobile
모바일 버전인 IE 모바일은 데스크톱보다 더 엄격하여, 최대 너비와 높이가 각각 4,096픽셀로 제한됩니다. 모바일 기기의 메모리 용량을 고려한 제한으로 볼 수 있습니다.
정리 및 개발 시 유의사항
브라우저마다 캔버스 크기 제한이 다르므로, 크로스 브라우징을 고려한다면 가장 보수적인 환경(예: IE Mobile의 4,096픽셀)을 기준으로 잡거나, 필요에 따라 여러 개의 작은 캔버스로 분할하여 처리하는 방식을 권장합니다. 또한 면적 제한은 너비와 높이 곱으로 계산되므로, 한쪽을 늘릴 경우 다른 쪽 크기를 조절해야 한다는 점도 기억해 두세요.