Canvas

---

HTML의 <canvas> 태그와 Javascript를 사용하면 다양한 그래픽 요소를 만들 수 있다.

• 기본적인 캔버스 사용법은 캔버스 태그를 작성하는 것으로 시작한다. 캔버스는 canvas 엘리먼트를 DOM으로 조작하는 방식으로 작성되기 때문에 엘리먼트를 선택할 때 사용할 id를 작성해주는 것이 좋다.

<canvas id="canvas">
  //캔버스를 지원하지 않는 브라우저에서는 캔버스 대신 태그 사이 내용이 표시된다. 
</canvas>

• 자바스크립트를 사용해서 엘리먼트를 선택한다.

const canvas = document.querySelector("#canvas");

캔버스를 본격적으로 다루기 전에, 너비와 높이를 설정해주어야 한다. 크기를 설정해주지 않으면 기본적으로 300픽셀 * 150픽셀의 사이즈로 생성된다.

크기를 설정 방법에는 두 가지가 있습니다.

1. 태그 속성

   각각 width, height 속성으로 설정해줄 수 있다. 다만, 이 방법은 어떤 단위로 속성값을 설정해주든 픽셀로만 인식한다.

<canvas id="canvas" width="500" height="500"></canvas>
// 500픽셀 * 500픽셀로 설정됩니다.

<canvas id="canvas" width="50vw" height="40vh"></canvas>
// vw, vh를 전달했지만 50픽셀 * 40픽셀로 설정됩니다.

2. DOM으로 설정

   이 경우는 유동적인 값도 설정해줄 수 있기 때문에 캔버스의 크기가 고정되어있지 않은 경우에 사용하기 좋다. 이 경우에는 원하는 단위로 값을 지정해서 명시할 수 있기 때문에 태그 속성으로 설정해주는 것과 차이가 있다.

     canvas.style.width = "50vw";
     canvas.style.height = "40vh";
     // DOM으로 설정하면 50vw * 40vh 로 단위값을 지정해도 설정이 됩니다. 
    // style 속성을 이용하여 크기에 변화를 주는 경우는 픽셀의 크기까지 해당 단위에 비례해 확대하는 개념으로, 특정한 경우가 아니면 사용을 자제합니다.
     
     canvas.width = window.innerWidth;
     canvas.height = window.innerHeight;
     // 화면 크기에 맞춰서 설정해줄 수도 있습니다.
   
     canvas.width = window.innerWidth * 0.5;
     canvas.height = window.innerHeight * 0.4;
     // 화면 크기를 가져와 그에 비례하여 설정해줄 수도 있습니다.