[Canvas] Canvas

Canvas는 주로 2D 그래픽에 중점을 둠

WebGL 사용시 3D 구현도 가능하나, WebGL도 결국 canvas 기반

픽셀 데이터를 조작 가능하므로, 일반 html css로 표현 불가한 것들 가능

(ex) Apple 공홈

그래픽 처리를 하는 거다 본 svg와 비교가 많이 됨

가장 큰 차이점은 canvas는 비트맵이고, svg는 벡터

벡터 = 점과 점 사이의 연산을 통해 그려내는 것
(ex) 일러스트
장점 : 연산으로 그림 => 크기가 커져도 용량 늘어나지 않음

반면, 캔버스는 비트맵이므로 점 계산할 게 많으면 연산 up, 렌더링 느려짐

---

브라우저 지원 여부

모더나이저

<script>
     // Canvas 지원 여부 확인
     if (Modernizr.canvas) {
       // console.log('Canvas를 지원하는 브라우저');
     }

     const canvas = document.querySelector('canvas');
     if (canvas.getContext) {
       console.log('캔버스 지원');
     }
</script>

캔버스 default 사이즈

500 x 300

CSS 높/넓이 vs 캔버스 높/넓이

당연히 캔버스에서 높/넓이 지정이 가능하고, CSS로도 높/넓이를 줄 수 있음
근데 매우 큰 차이점 존재!

.canvas {
    width: 500px;
    height: 300px;
    background: #eee;
}

<canvas class="canvas" width="500" height="300"></canvas>
<canvas class="canvas canvas2" width="1000" height="600"></canvas>

<script>
      const canvas = document.querySelector('.canvas');
      const canvas2 = document.querySelector('.canvas2');
      const context = canvas.getContext('2d');
      const context2 = canvas2.getContext('2d');

      context.arc(100, 100, 50, 0, Math.PI*2, false);
      context2.arc(100, 100, 50, 0, Math.PI*2, false);
      context.fill();
      context2.fill();
</script>

CSS는 가시적으로 봤을 때 어거지로 끼워맞출 수는 있으나, canvas 안에서 요소를 그렸을 때 canvas가 부여한 높/넓이 기준으로 그려짐

위처럼 레티나 대응을 위해 CSS로 줄이는 방법이 자주 쓰임. Canvas 가 풀스크린으로 쓰이는 경우가 많은데, 이때는 어떻게 줄이나?

=> JS로 캔버스의 높/넓이를 window 스크린*2배로 한 후, CSS에서는 100%

=> BUT 마냥 좋지는 않음. 픽셀 개수가 많아져서 렌더링 속도 저하
=> SO 미적 vs 성능 잘 고려해서

(ex) Apple 공홈도 2배 해서 CSS로 2배 줄임