<canvas>

<canvas> 태그는 비트맵 방식의 그림을 설정합니다. canvas API와 WebGL API를 통해 그래픽과 애니메이션을 만듭니다.

---

<canvas>

<canvas> 태그는 비트맵 방식의 그림을 설정합니다.

특징	설명
요소	블록 요소(Block Element)
닫는 태그	적용(<canvas> ~ </canvas>)
버전	HTML4
시각적 표현	기본적 버튼 디자인(브라우저마다 다름)
사용성	★★★★☆

정의(Definition)

• <canvas> 태그는 비트맵 방식의 그림을 설정합니다.
• <canvas> 태그는 canvas API와 WebGL API를 통해 그래픽과 애니메이션을 만듭니다.
• <canvas> 태그는 <img> 태그와 달리 닫는 태그를 사용해야 합니다.
• <canvas> 태그는 자바스크립트를 사용하여 설정합니다.
• <canvas> 태그의 크기는 CSS를 통해 설정할 수 있지만, 렌더링을 통해 이미지 크기가 변경되어 왜곡 될 수 있습니다.

비교(Compare)

• <canvas> 태그는 비트맵 방식의 그림을 정의합니다.
• <svg> 태그는 벡터 방식의 그림을 정의합니다.

예제1(Sample)

캔버스를 통해 사각형을 설정한 예제입니다.

HTML

CSS

SCRIPT

<canvas width="300" height="200"></canvas>

//CSS none

<script>
    const canvas = document.querySelector('canvas');
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = '#a2cbfa';
    ctx.fillRect(10, 10, 100, 100);
</script>

속성(Property)

속성	값(예)	설명	버전
height	height="200"	요소의 세로 값을 설정합니다.	-
width	width="200"	요소의 가로 값을 설정합니다.	-

호환성(Compatibility)

						6	7	8	9	10	11
<canvas>	○	○	○	○	○	❌	❌	❌	❌	○	○	○	○	○
height	○	○	○	○	○	❌	❌	❌	❌	○	○	○	○	○
width	○	○	○	○	○	❌	❌	❌	❌	○	○	○	○	○

참고 사이트(Reference)

• MDN
• W3C

---