HTML 캔버스를 페이지 배경으로 사용하는 방법

네, 가능합니다. HTML <canvas> 요소를 페이지 배경처럼 활용하려면 CSS의 위치 속성을 적절히 설정하면 됩니다.

방법 1: absolute 위치와 z-index 활용

캔버스에 position: absolute를 지정하고 z-index를 -1로 설정하면, 캔버스가 다른 모든 콘텐츠 뒤쪽으로 이동하여 배경 역할을 하게 됩니다.

canvas {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

이 방식에서는 left: 0과 top: 0으로 캔버스를 화면 좌상단에 고정하고, 음수 z-index 값 덕분에 텍스트나 이미지 등 다른 요소들이 캔버스 위에 자연스럽게 표시됩니다.

방법 2: fixed 위치로 고정 배경 만들기

스크롤해도 배경이 화면에 그대로 유지되기를 원한다면 position: fixed를 사용하는 것이 좋습니다. 특정 섹션이나 ID를 지정해 스타일을 적용할 수도 있습니다.

<style>
    #canvasSection {
        position: fixed;
    }
</style>

두 방식의 차이점

absolute는 문서 흐름 기준으로 배치되므로 스크롤 시 캔버스가 함께 움직이고, fixed는 뷰포트 기준으로 고정되어 스크롤과 무관하게 항상 같은 위치에 머무릅니다. 애니메이션 배경이나 인터랙티브한 시각 효과를 전체 페이지에 적용하려면 fixed 방식이 더 적합합니다.