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.
Note: The <canvas> tag is new in HTML5.
Syntax:
<canvas id = "script"> Contents... </canvas>
Attributes: The tag accepts two attributes as mentioned above and described below.
- height: This attribute is used to set the height of the canvas.
- width: This attribute is used to set the width of the canvas.
Example 1:
HTML
<!DOCTYPE html><html> <body> <!-- canvas Tag starts here --> <canvas id = "GeeksforGeeks" width = "200" height = "100" style = "border:1px solid black"> </canvas> <!-- canvas Tag ends here --> </body></html> |
Output:
Example 2:
HTML
<!DOCTYPE html><html> <body> <!-- HTML code to illustrate canvas tag --> <canvas id = "geeks" height = "200" width = "200" style = "border:1px solid black"> </canvas> <script> var c = document.getElementById("geeks"); var cx = c.getContext("2d"); cx.beginPath(); cx.arc(100, 100, 90, 0, 2 * Math.PI); cx.stroke(); </script> </body></html> |
Output:
Example 3:
HTML
<!DOCTYPE html><html> <body> <!-- canvas tag starts here --> <canvas id = "geeks" width = "200" height = "200" style = "border:1px solid black"> </canvas> <!-- canvas tag ends here --> <script> var c=document.getElementById("geeks"); 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 4.0
- Internet Explorer 9.0
- Firefox 2.0
- Opera 9.0
- Safari 3.1
Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML course.
