💡 제가 필요해서 정리하게 됐습니다. 출처는 Canvas 공식 핸드북입니다. 자세한 사항은 꼭 핸드북을 참고하시기를 권장드립니다.

<canvas>

애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작, 실시간 비디오 처리를 위해 사용되는 HTML 요소이다.

주로 2D 그래픽에 중점을 두고 있으며, WebGL또한 이 <canvas>를 사용한다.

<canvas> 사용법

가장 기본적으로 HTML 문서에 아래의 태그를 입력하여 사용할 수 있다.

canvas는 일반적인 이미지처럼 스타일(CSS)을 적용시킬 수 있다.

즉, margin, background 등을 사용할 수 있다는 의미이다.

하지만 캔버스 위에 그리는 것에는 영향을 받지 않는다.

대체로 JavaScript와 같은 스크립트를 이용하여 캔버스 위의 컨텐츠를 그린다.

**<canvas> 속성(attribute)**

• 속성으로는 글로벌HTML 속성(id, class 등)이 될 수 있다.
• width, height 속성을 통해 캔버스의 너비와 높이를 설정한다. → DOM 프로퍼티를 사용하여 설정할 수도 있다. → 기본값은 width=300, height=150이다.

<canvas id="canvas">대체 콘텐츠는 여기에 작성한다</canvas>

JavaScript

이후, JavaScript 파일에서 <canvas> 참조를 얻는다.