캔버스 요소

캔버스 요소(canvas element)는 HTML5의 일부로서 2차원 모양과 비트맵 그림의 스크립트 작성이 가능한 동적 렌더링을 허용한다. 비트맵을 업데이트하는 낮은 수준의 절차적 모델이며 씬 그래프가 내장되어 있지 않다.

역사

캔버스는 애플이 자사의 macOS 웹킷 구성 요소 안에 사용할 목적으로 2004년에 처음 도입하였으며, 대시보드 위젯과 사파리 브라우저와 같은 응용 프로그램들의 기능을 강화하는데 사용되었다. 나중에 2005년에 버전 1.8의 게코 브라우저에 채택되었으며, 오페라에는 2006년 채택되었고, 차세대 웹 기술의 신규 제안 사양으로 WHATWG에 의해 표준화되었다.

예

다음의 코드는 캔버스 요소를 HTML 문서에서 만든다:

<canvas id="example" width="200" height="200">
브라우저가 HTML5 캔버스를 지원하지 않으면 이 문구가 표시됩니다.
</canvas>

자바스크립트를 사용하여 캔버스를 그릴 수 있다:

var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = 'red';
context.fillRect(30, 30, 50, 50);

이 코드는 화면에 빨간 사각형을 그린다.

캔버스 API는 캔버스 컨텍스트의 모든 속성을 저장하고 복원하기 위해 save()와 restore()도 제공한다.

브라우저 지원

현재 버전의 모질라 파이어폭스, 구글 크롬, 인터넷 익스플로러, 사파리, 캉커러, 오페라, 마이크로소프트 에지에 의해 지원된다.

같이 보기

• 디스플레이 포스트스크립트
• 그래픽 장치 인터페이스(GDI+)
• WebGL

외부 링크

• 《The canvas element》, W3C, 2014년 10월 28일, 2015년 1월 9일에 확인함 
• 《HTML Canvas 2D Context》, W3C, 2014년 8월 21일, 2015년 1월 9일에 확인함 
• Canvas description in WHATWG Web Applications draft specifications