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

특성

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

height

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

moz-opaque비표준지원이 중단되었습니다

투명도가 중요한 요소인지를 캔버스에 알려줍니다. 투명도가 없음을 알게되면 페인팅 성능이 최적화됩니다. Mozilla 기반 브라우저에서만 지원하므로, 표준canvas.getContext('2d', { alpha: false }) 를 대신 사용하세요.

width

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

사용 일람

대체 콘텐츠

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

닫는 태그 필수

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

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

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

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

최대 캔버스 크기

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

예제

HTML

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

<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 같은 접근성 도구에 노출되지 않습니다. 일반적으로 접근성 웹 사이트나 앱에서는 캔버스 사용을 피해야 합니다. 다음 안내서는 캔버스를 보다 쉽게 접근 가능한 형태로 사용하는 법을 설명합니다.

• MDN Hit regions and accessability
• Canvas 접근성 유즈 케이스
• Canvas 엘리먼트 접근성 문제
• Firefox 13 의 HTML5 Canvas 접근성 – by Steve Faulkner
• 대화형 캔버스 엘리먼트의 모범 사례

명세

브라우저 호환성

같이 보기

• Canvas API
• 캔버스 자습서
• 캔버스 치트 시트
• 캔버스 관련 데모