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

캔버스는 애플이 자사의 macOS 웹킷 구성 요소 안에 사용할 목적으로 2004년에 처음 도입하였으며,^[1] 대시보드 위젯과 사파리 브라우저와 같은 응용 프로그램들의 기능을 강화하는데 사용되었다. 나중에 2005년에 버전 1.8의 게코 브라우저에 채택되었으며,^[2] 오페라에는 2006년 채택되었고,^[3] 차세대 웹 기술의 신규 제안 사양으로 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()도 제공한다.

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

• 디스플레이 포스트스크립트
• 그래픽 장치 인터페이스(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