삽질하기 싫으면 꼭 읽어봐야 할 Canvas 트러블 슈팅

0에서 SVG 대신 Canvas를 사용하며 겪었던 트러블 슈팅 경험을 공유합니다. 특히 Canvas 렌더링 시 흔히 발생하는 '앨리어싱' 현상과 이를 해결하기 위한 '안티 앨리어싱' 기법에 대해 설명합니다.

앨리어싱은 화면 해상도 차이로 인해 그래픽이 깨져 보이는 현상이며, 이를 방지하기 위해 `devicePixelRatio` (DPR) 개념을 이해하고 Canvas의 `width`, `height` 속성을 DPR에 맞게 조정하는 것이 중요합니다. 또한, 디스플레이 크기와 실제 Canvas 크기 간의 비율을 맞추기 위해 `scale` 조정을 통해 텍스트 흐릿함과 같은 문제를 해결한 과정을 상세히 다룹니다.

이를 통해 개발자들이 Canvas 사용 시 겪을 수 있는 문제들을 미리 파악하고 효과적으로 해결하는 데 도움을 줄 수 있습니다. 로 해결하는 데 도움을 줄 수 있습니다.