HTML <canvas>: 그래픽 캔버스 요소

HTML <canvas> 요소는 캔버스 스크립팅 API와 WebGL API를 사용해 그래픽과 애니메이션을 그릴 수 있는 요소입니다.

특성

전역 특성을 포함합니다.

height

좌표 공간의 높이입니다. CSS 픽셀 단위로, 기본 값은 150입니다.

width

좌표 공간의 너비입니다. CSS 픽셀 단위로, 기본 값은 300입니다.

사용 일람

대체 콘텐츠

캔버스를 지원하지 않는 브라우저에서는 <canvas> 요소 안에 포함된 내용을 대신 보여줍니다.

닫는 태그 필수

<img> 요소와는 달리, <canvas> 요소는 닫는 태그(</canvas>)를 요구합니다.

캔버스 크기 조절, CSS vs. HTML

캔버스의 출력 크기는 CSS로 수정할 수 있지만, 이 방법으로는 좌표 공간이 바뀌지 않으므로 이미지가 변형될 수 있습니다.

<canvas>에 직접 width와 height 특성으로 크기를 지정하는 편이 낫습니다. HTML에서 지정할 수도 있고, 런타임에 JavaScript에서 지정하는 방법도 있습니다.

최대 캔버스 크기

<canvas> 요소의 최대 크기는 굉장히 크지만, 정확한 한계는 브라우저마다 다릅니다.

예제

HTML

이 예제는 HTML 문서에 캔버스 요소를 추가합니다. 브라우저가 캔버스를 지원하지 않거나, 캔버스를 읽을 수 없을 때 대신 보여줄 대체 텍스트도 포함합니다.

<canvas width="300" height="150"> 대충 캔버스의 내용을 설명하는 대체 텍스트 </canvas>

JavaScript

이후 JavaScript 코드에서 [HTMLCanvasElement.getContext()]를 호출해 그리기 맥락을 가져온 후, 캔버스에 원하는 형태를 그립니다.

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
ctx.fillStyle = 'green'
ctx.fillRect(10, 10, 100, 100)

결과

접근성 고려사항

대체 콘텐츠

<canvas> 요소 자체는 비트맵에 불과하며, 그려진 개체에 대한 정보를 아무것도 제공하지 않습니다. 캔버스 콘텐츠는 시맨틱 HTML과는 달리 접근성 도구로 노출되지도 않습니다. 그러므로 접근성을 확보해야 하는 상황이라면 일반적인 경우엔 캔버스를 피하는 편이 좋습니다. 아래의 문서들에서 캔버스와 접근성에 대해 더 알아보세요.

• Canvas accessibility use cases
• Canvas element accessibility issues
• Best practices for interactive canvas elements

명세

HTML Living Standard

브라우저 호환성