# 의도적으로 캔버스 픽셀 밀도를 선택하십시오. > 게임이 여러 화면에서 선명하게 보여야 하는 경우 캔버스 백업 해상도, 장치 픽셀 비율, 메모리 사용 및 그리기 비용의 균형을 맞춥니다. - URL: https://oneshotgems.ai/ko/topics/canvas-pixel-density - 카테고리: 게임 개발자용 - 유형: 가이드 - 업데이트일: 2026년 10월 5일 캔버스에는 CSS 표시 크기와 픽셀 백업 저장소가 있습니다. 이러한 크기가 다른 경우 브라우저는 그려진 비트맵의 크기를 조정하여 아트를 부드럽게 만들 수 있습니다. 모든 장치 픽셀을 일치시키면 선명도가 향상되지만 게임에서 처리해야 하는 픽셀 수가 늘어납니다. 올바른 설정은 아트 스타일과 렌더링 예산에 따라 다릅니다. 픽셀 아트 스프라이트에는 정수 스케일링과 가장 가까운 이웃 선택이 필요할 수 있지만 라인 아트 인터페이스는 더 높은 백업 해상도의 이점을 누릴 수 있습니다. ## 픽셀을 설정하기 전에 CSS 상자를 측정하세요. 표시된 캔버스 크기를 읽고, 선택한 장치 배율을 곱하고, 뒷면 너비와 높이를 설정하고, CSS 공간 단위를 사용하여 게임 논리를 계속 사용할 수 있도록 그리기 좌표를 변환합니다. 너비나 높이를 변경한 후 변환을 다시 적용하세요. 해당 캔버스 속성을 할당하면 그리기 상태가 재설정되기 때문입니다. 1픽셀 그리드, 대각선 가장자리, 작은 UI 텍스트를 1, 1.5, 2와 같은 배율 인수로 비교합니다. 선명도와 반응성을 모두 확인하세요. 전체 devicePixelRatio 승수는 시작점일 뿐 모든 게임이 따라야 하는 규칙은 아닙니다. 렌더링 배율을 낮추면 CSS 레이아웃을 변경하지 않고 밀도가 높은 디스플레이에서 비용을 줄일 수 있습니다. ## 크기 조정 및 메모리를 선택의 일부로 처리 백업 저장소 픽셀 수는 두 차원 모두에서 증가하므로 각 방향으로 크기를 두 배로 늘리면 픽셀 수가 4배 증가합니다. 지원되는 가장 큰 디스플레이 크기에서 바쁜 장면을 테스트하고 고밀도 설정을 제공하기 전에 메모리 부족이나 느린 다시 그리기를 찾아보세요. MDN의 캔버스 지침은 devicePixelRatio 기반 설정을 보여줍니다. WebGL의 모범 사례 페이지는 정수가 아닌 비율과 확대/축소로 미묘한 점을 설명합니다. 브라우저를 확대하거나 디스플레이 간에 창을 이동한 후 다시 확인하고, 유효 크기가 변경되지 않은 경우 백업 저장소를 반복적으로 재설정하지 마세요. ## 자주 묻는 질문 **캔버스 너비는 항상 CSS 너비와 devicePixelRatio를 곱해야 합니까?** 아니요. 콘텐츠가 선명해질 수 있지만 처리량과 메모리 사용량도 늘어납니다. 같은 장면과 시각적 검사로 전체 해상도와 제한된 배율을 비교하세요. **크기를 조정한 후 그림이 흐려지는 이유는 무엇입니까?** 캔버스 너비나 높이를 변경하면 비트맵이 지워지고 컨텍스트 상태가 재설정됩니다. 배경 크기를 다시 계산하고, 컨텍스트 크기를 다시 조정하고, 장면을 다시 그립니다. ## 궁금한 것을 더 찾아보세요 - [캔버스 렌더링 병목 현상 찾기](https://oneshotgems.ai/ko/topics/canvas-game-performance): 반복 가능한 장면으로 2D 캔버스 게임을 프로파일링하고 프레임이 소비되는 위치를 측정한 후에만 비용이 많이 드는 그리기 작업을 줄일 수 있습니다. - [브라우저 게임의 크기 변경을 올바르게 처리하기](https://oneshotgems.ai/ko/topics/game-resize-handling): 플레이어가 창 크기를 조정하거나 화면 방향을 바꿀 때 게임 좌표, 캔버스 크기, 레이아웃을 동기화하세요. - [캔버스에서 스프라이트 아틀라스를 안정적으로 렌더링](https://oneshotgems.ai/ko/topics/sprite-atlas-rendering): 하나의 렌더링 맵에서 소스 직사각형, 트리밍 규칙, 피벗 및 로딩 검사를 정의하여 스프라이트 아틀라스 프레임을 정렬된 상태로 유지하세요. ## 추가 읽을거리 - [MDN: 캔버스 최적화](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas) - [MDN: WebGL 모범 사례](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices) --- 대표 페이지: https://oneshotgems.ai/ko/topics/canvas-pixel-density