-
canvas 2d context 최적화
-
2d context 생성 시 alpha(투명도) 옵션을 false로 생성
-
context alpha 채널이 포함되지 않도록 하여, 브라우저는 배경이 항상 불투명하다고 인식하므로, 렌더링 속도가 개선
const context = canvas.getContext('2d', { alpha: false });
-
-
안티 앨리어싱
-
컴퓨터 그래픽 해상도의 한계로 계단 현상이 발생하는 앨리어싱이 발생
DPR (Device Pixel Ratio) : CSS Pixel을 구성하는데 필요한 물리적 Pixel 수 -
ex) 해상도가 높은 모니터에서 text가 흐릿하게 보이는 text blurry 현상이 발생됨
- DPR의 기본값은 1, 레티나 디스플레이의 DPR은 2인데, 이때 디스플레이마다 CSS 1픽셀을 그리는데 사용되는 실제 픽셀수가 달라짐
- canvas의 크기를 DPR에 따라 보정이 필요
-
-
canvas 라인 블러 현상 보정
- lineWidth 가 홀수일 경우 라인이 흐릿하게 퍼지는 블러 현상이 발생됨
- 라인을 그릴때 좌표와 두께를 기준으로 라인을 그리기 때문에 발생되는 현상
- (3, 1)에서 (3, 5)로 두께가 1인 라인을 그릴 때, 라인은 중심이 되는 지점부터 그려지므로 두께가 1이지만 그리드에서 2칸을 차지하므로 블러 현상이 발생
- 라인의 두께가 홀수일 경우 발생되는 현상이므로, 라인 너비가 홀수이면, 반 픽셀 이동하여 블러 현상을 보정하여 선명한 라인 표현
- 보정 전
- 보정 후
-
canvas layer
- canvas의 animation을 표현하기 위해 canvas에 그려진 화면을 지우고 다시 그리는 과정이 필요한데 만약 데이터량이 클수록 재연산이 발생하므로 성능저하가 심해짐
- animation 표현을 담당하는 canvas, 정적 표현을 담당하는 canvas등으로 역할을 분리한 canvas를 여러장 겹쳐 정적 데이터 재연산을 skip
- 시간복잡도 단축
- n → data 량
- m → animation 발생 빈도
- 개선 전 O(n*m) → 개선 후 O(n)
