HTML <canvas> Tag


The <canvas> HTML tag is an element that allows dynamic, scriptable rendering of 2D shapes and bitmap images. It provides a drawing surface within your web page, which can be manipulated using JavaScript to create animations, interactive graphics, and games. By specifying width and height attributes, you define the size of the canvas. The <canvas> element must be paired with a script to render anything within it. JavaScript functions can draw shapes, paths, text, and images onto the canvas. This tag is widely used in web development for creating visually engaging and interactive content, enabling developers to create dynamic graphics and animations directly within the browser.


Permitted Parents
Any element that accepts phrasing content
Inline and text
Start/End Tags
Start tag: required, End tag: required


<canvas id="canvasTest">Your browser does not support the HTML5 canvas tag.</canvas>
<script type="text/javascript">
var canvas=document.getElementById('canvasTest');
var ctx=canvas.getContext('2d');


Attribute Definition
height Specifies the canvas height in pixels
width Specifies the canvas width in pixels

Global Attributes

The <canvas> tag also supports the Global Attributes in HTML5

Event Attributes

The <canvas> tag also supports the Event Attributes in HTML5

Browser Support

The following table will show you the current browser support for the HTML <canvas> tag.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 30th March 2024