HTML5 캔버스를 브라우저 창 크기에 맞추는 방법

HTML5 캔버스(canvas)를 브라우저 창 전체에 꽉 차게 표시하려면 CSS를 활용하는 것이 가장 간단하고 효과적인 방법입니다. 캔버스 요소의 위치와 부모 컨테이너의 스타일을 적절히 설정하면 화면 크기에 딱 맞게 조정할 수 있습니다.

CSS로 캔버스를 창에 맞추기

먼저 캔버스를 감싸는 컨테이너(예: #box)에 overflow: hidden;을 지정하여 캔버스가 창 밖으로 삐져나가지 않도록 합니다. 그다음 캔버스 자체에는 position: absolute;를 적용하고 좌표를 0px로 설정해 화면 왼쪽 상단에 고정합니다.

#box {
    overflow: hidden;
}
#canvas {
    position: absolute;
    top: 0px;
    left: 0px;
}

코드 설명

• overflow: hidden — 캔버스가 컨테이너보다 클 경우 스크롤바가 생기지 않도록 넘치는 부분을 잘라냅니다.
• position: absolute — 캔버스를 문서 흐름에서 분리시켜 자유롭게 배치할 수 있게 합니다.
• top / left: 0px — 캔버스를 화면의 정확한 왼쪽 상단 모서리에 배치합니다.

추가 팁: 캔버스 크기를 동적으로 조절하기

CSS만으로는 캔버스의 실제 해상도(width, height 속성)가 변하지 않으므로, 창 크기가 변경될 때마다 캔버스 내부 크기도 함께 업데이트해 주는 것이 좋습니다. 아래처럼 JavaScript의 resize 이벤트를 활용할 수 있습니다.

function resizeCanvas() {
    const canvas = document.getElementById('canvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}

window.addEventListener('resize', resizeCanvas);
resizeCanvas(); // 초기 로드 시 실행

이렇게 하면 브라우저 창 크기가 어떻게 변하더라도 캔버스가 항상 화면 전체에 맞춰 선명하게 표시됩니다. 게임이나 인터랙티브 그래픽 프로젝트에서 특히 유용한 기법입니다.