HTML Canvas 최적화

• 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)