HTML <canvas> Tag
Description
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.
Properties
- Permitted Parents
- Any element that accepts phrasing content
- Content
- Inline and text
- Start/End Tags
- Start tag: required, End tag: required
Example
<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');
ctx.fillStyle='#800000';
ctx.fillRect(0,0,100,100);
</script>
Attributes
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.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
12 | 1 | 1.5 | 9 | 2 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
18 | 4 | 10.1 | 1 | 1 | 37 |
Last updated by CSSPortal on: 30th March 2024