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

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

콘텐츠 카테고리 플로우 콘텐츠, 구문 콘텐츠, 내장 콘텐츠, 뚜렷한 콘텐츠.
가능한 콘텐츠 투명하지만 대화형 콘텐츠가 아닌 요소. 단, <a>, <button>, 그리고 <input>type 특성이 checkbox, radio, button인 요소는 가능
태그 생략 None, both the starting and ending tag are mandatory.
가능한 부모 요소 구문 콘텐츠를 허용하는 모든 요소.
가능한 ARIA 역할 모두
DOM 인터페이스 HTMLCanvasElement

특성

이 요소는 전역 특성을 포함합니다.

height
좌표 공간의 높이입니다. CSS 픽셀 단위로, 기본값은 150입니다.
moz-opaque This API has not been standardized. This deprecated API should no longer be used, but will probably still work.
투명도가 중요한 요소인지를 캔버스에 알려줍니다. 투명도가 없음을 알게되면 페인팅 성능이 최적화됩니다. Mozilla 기반 브라우저에서만 지원하므로, 표준 canvas.getContext('2d', { alpha: false }) 를 대신 사용하세요.
width
좌표 공간의 너비입니다. CSS 픽셀 단위로, 기본값은 300입니다.

사용 일람

대체 콘텐츠

<canvas> 블록 안에 콘텐츠를 추가해 대체 콘텐츠로서 사용할 수 있습니다. 대체 콘텐츠는 캔버스를 지원하지 않는 구형 브라우저와, JavaScript를 비활성화한 브라우저에서 표시됩니다. 유용한 대체 텍스트, 혹은 하위 DOM을 제공하면 캔버스의 접근성을 향상할 수 있습니다.

닫는 태그 필수

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

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

캔버스의 표시 크기는 CSS로도 수정할 수 있습니다. 그러나, CSS를 사용할 경우 렌더링 과정에서 CSS 크기에 맞추기 위해 이미지의 크기를 조절하므로, 최종 그래픽이 변형될 수 있습니다.

따라서 <canvas> 요소의 widthheight 특성을 통해 직접 크기를 바꾸는 것이 좋습니다. HTML에서 직접 할 수도 있고, JavaScript를 사용할 수도 있습니다.

최대 캔버스 크기

<canvas> 요소의 최대 크기는 매우 크지만, 정확한 최대 크기는 브라우저마다 다릅니다. 다음 표는 다양한 테스트와 여러 출처(Stack Overflow 등)에서 수집한 값입니다.

브라우저 최대 높이 최대 너비 최대 크기
Chrome 32,767 픽셀 32,767 픽셀 268,435,456 픽셀 (i.e., 16,384 x 16,384)
Firefox 32,767 픽셀 32,767 픽셀 472,907,776 픽셀 (i.e., 22,528 x 20,992)
Safari 32,767 픽셀 32,767 픽셀 268,435,456 픽셀 (i.e., 16,384 x 16,384)
IE 8,192 픽셀 8,192 픽셀 ?

참고: 최대 면적 또는 영역을 초과하면 그리기 명령이 동작하지 않으므로, 캔버스를 사용할 수 없습니다.

예제

HTML

이 코드 조각은 HTML 문서에 캔버스를 추가합니다. 대체 텍스트를 추가해서 브라우저가 캔버스를 렌더링 할 수 없거나, 캔버스를 읽을 수 없는 경우에 대비했습니다.

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

JavaScript

그 다음, JavaScript 코드 내에서 HTMLCanvasElement.getContext()를 호출해 그리기 맥락을 얻어서 캔버스 위에 그립니다.

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);

결과

접근성 문제

대체 콘텐츠

<canvas> 요소 자체는 비트맵에 불과하며 그려진 객체에 대한 어떠한 정보도 제공하지 않습니다. 캔버스 콘텐츠는 시맨틱 HTML 같은 접근성 도구에 노출되지 않습니다. 일반적으로 접근성 웹 사이트나 앱에서는 캔버스 사용을 피해야 합니다. 다음 안내서는 캔버스를 보다 쉽게 접근 가능한 형태로 사용하는 법을 설명합니다.

명세

브라우저 호환성

BCD tables only load in the browser

같이 보기