HTML canvas Tag
The HTML <canvas> tag was introduced in HTML5 to display 2D shapes and graphics on a webpage using JavaScript. This tag allows you to create graphics, games, images and other visuals on a web page.
By default the <canvas> tag in HTML has a width of 300px and a height of 150px without any border or content. We can fill in visuals like some graphics, or drawings or images in an HTML canvas using JavaScript.
The <canvas> tag can be used to apply various transformations like rotate and blur on an image.
The content that is defined between the starting and ending <canvas> tag is only displayed when the browser does not support the canvas tag.
The maximum size of the <canvas> tag is very large, but its exact size only depends upon the browser.
Also, this is a block-level element.
HTML <canvas> Tag - Syntax and Usage
The <canvas> element requires the start(opening) tag and end(closing) tag.
<canvas>
...
</canvas>
HTML <canvas> Tag Attributes
The <canvas> tag supports Global attributes and Event attributes. Some of the common attributes used with this tag are given below:
| Attributes |
Description |
height |
This attribute is used to specify the height of the canvas in pixels. |
width |
This attribute is used to specify the width of the canvas in pixels. |
moz-opaque |
This attribute is used to manage the translucency of canvas |
id |
The id attribute is used to specify a unique name to the element. The id attribute of the canvas element is used to get the reference of the canvas in Javascript to add graphics to it. |
style |
The style attribute is used to specify CSS styling code. |
HTML <canvas> Tag Basic Example
In this section, we will cover a few examples of the <canvas> tag to help you understand how we can use it.
1. Simple Canvas Tag
In the HTML code below, we have just used a <canvas> tag in our HTML <body>, this will have no visual effect on the webpage, apart from the extra space that the canvas tag will occupy.
<!DOCTYPE html>
<head>
<title>Simple Canvas</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
</html>
It will just take a default width of 300px and a height of 150px.
We can use the style attribute to add style to this tag, like adding a border to know the boundaries of the canvas. See the code example below:
<!DOCTYPE html>
<head>
<title>Simple Canvas</title>
</head>
<body>
<canvas id="myCanvas" style="border: solid 1px #000;"></canvas>
</body>
</html>
If you run the above code you will see a rectangle, with a black border, and default width of 300px and a height of 150px.
2. Canvas tag with Graphics (using JavaScript)
In this example, we are going to fill create a rectangular shape inside the canvas and will provide a background color to it using fillstyle property and fill() method, add a border using the lineWidth and strokeStyle properties and stroke() method.
In JavaScript, we can access the canvas tag using the id attribute and to add graphics to it, we use the canvas.getContext("2d") method to get control over the canvas context. The getContext() method can take values like 2d, webgl, webgl2, etc.
3. Canvas tag with Text (using JavaScript)
In this example, we will learn how we can draw text on a canvas element.
In the example above, we used the fillText() method to provide text and the font property to add some styling for the text.
Default CSS Style for HTML <canvas> Tag
By default, the following CSS styling is applied to the <canvas> tag.
canvas {
height: 150px;
width: 300px;
}
Browser Support for HTML <canvas> tag
Following browsers support this attribute:
-
Firefox 2+
-
Google Chrome 4+
-
Internet Explorer 9+
-
Apple Safari 3.1+
-
Opera 9+
