HTML <canvas> Tag
The <canvas> tag in HTML is used to draw graphics on a web page using JavaScript. It can be used to draw paths, boxes, texts, gradients, and adding images. By default, it does not contain borders and text.
Syntax
<canvas id = "script"> Contents... </canvas>
Note:
- The <canvas> tag is new in HTML5.
- The following are the default values for <canvas> element that can be displayed by most of the Browsers:
canvas {
height: 150px;
width: 300px;
}
Attributes
The <canvas> tag accepts two attributes which are described below:
Attributes |
Descriptions |
---|---|
This attribute is used to set the height of the canvas by taking the value in pixels and its default value is 150. |
|
This attribute is used to set the width of the canvas by taking the value in pixels and its default value is 300. |
The <canvas> tag supports both Global Attributes & Event Attributes in HTML.
Example 1: In this example, we will create a canvas element with a width of 200 pixels and a height of 100 pixels, displayed with a black border.
HTML
<!DOCTYPE html> < html > < body > < canvas id = "w3wiki" width = "200" height = "100" style = "border:1px solid black" > </ canvas > </ body > </ html > |
Output:
Example 2: In this example, a 200×200 canvas with ID “Beginner” displays a black-bordered circle at coordinates (100,100) using HTML5 Canvas.
HTML
<!DOCTYPE html> < html > < body > < canvas id = "Beginner" height = "200" width = "200" style = "border:1px solid black" > </ canvas > < script > var c = document.getElementById("Beginner"); var cx = c.getContext("2d"); cx.beginPath(); cx.arc(100, 100, 90, 0, 2 * Math.PI); cx.stroke(); </ script > </ body > </ html > |
Output:
Example 3: In this example, a 200×200 canvas with ID “Beginner” displays a radial gradient that transitions from red to green, filling the entire canvas using HTML5 Canvas.
HTML
<!DOCTYPE html> < html > < body > < canvas id = "Beginner" width = "200" height = "200" style = "border:1px solid black" > </ canvas > < script > var c = document.getElementById("Beginner"); var cx = c.getContext("2d"); var grd = cx.createRadialGradient (100, 100, 5, 100, 100, 100); grd.addColorStop(0, "red"); grd.addColorStop(1, "green"); cx.fillStyle = grd; cx.fillRect(0, 0, 200, 200); </ script > </ body > </ html > |
Output:
Supported Browsers
- Google Chrome 1.0 and above
- Edge 12.0 and above
- Firefox 1.5 and above
- Opera 9.0 and above
- Safari 2.0 and above
Contact Us