devmoa

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

TOAST_UI·2021년 5월 26일·00
CanvasTOAST UI CHARTAnti-AliasingdevicePixelRatioCSS PixelFrontend

AI 요약

Beta

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

고해상도 모니터에서 텍스트가 흐릿하게 보이는 문제를 해결하기 위해 `devicePixelRatio`(DPR) 개념을 도입하고, Canvas의 `width`, `height` 속성을 DPR에 맞춰 보정하며 `scale`을 조정하는 방법을 제시합니다. 이를 통해 Canvas 기반 차트의 시각적 품질을 개선하고 사용자 경험을 향상시키는 방법을 다룹니다.

용자 경험을 향상시키는 방법을 다룹니다.

이 글이 궁금하신가요?

원문 블로그에서 전체 내용을 확인해 보세요

원문 읽으러 가기

AI 추천 연관 게시글

이 글과 관련된 다른 기술 블로그 글을 AI가 추천합니다