HTML <canvas> Tag
In this tutorial, we will learn about canvas tag in HTML with the help of examples.
<canvas> Tag
Canvas tag <canvas> is used for creating graphics, animations, etc using scripting (usually Javascript).
<canvas> tag is only a transparent container for graphics, you must use a script to draw the graphics and CSS for styling the <canvas> tag.
Note : <canvas> tag is mainly used for game development.
Syntax
<canvas>.....</canvas>
Example
<!DOCTYPE html>
<html>
<head>
<title>Canvas Tag</title>
</head>
<body>
<canvas id = "Canvas">
Your browser does not support the canvas tag.
</canvas>
<script>
var canvas = document.getElementById("Canvas");
var ctx = canvas.getContext("2D");
ctx.fillStyle = "#0099ff";
</script>
</body>
</html>Output
Specific Attribute
| Attribute | Value | Description |
|---|---|---|
| height | pixels | Specifies the height of the canvas |
| width | pixels | Specifies the width of the canvas |
Note : The default value for the attribute height is 150 and for the width is 300.
Global Attribute
Canvas Tag support all the global attributes of HTML.
Event Attribute
Canvas Tag support all the event attributes of HTML.
Next Tutorial
We hope that this tutorial helped you develop better understanding of the concept of canvas tag in HTML.
Keep Learning : )
In the next tutorial, you'll learn about HTML caption Tag.