The HTML5 <canvas> element creates a blank space on your web page that you can draw into using JavaScript. This tag aims to create a dynamic, scriptable rendering of 2D shapes and bitmap images. It is a great tool for games, animations, graphs, and other graphically-intensive projects.
Code Example: Drawing a Circle
Here is an example of how to draw a circle using the <canvas> tag and some JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>My Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500">Your browser does not support the HTML5 canvas tag.</canvas>
<script>var c = document.getElementById("myCanvas");<br>var ctx = c.getContext("2d");<br>ctx.fillStyle = "#ff0000"; // red
ctx.beginPath();<br>ctx.arc(100, 75, 50, 0, Math.PI * 2, true);<br>ctx.closePath();<br>ctx.fill();</script>
</body>
</html>
In this example, we first get the canvas element by its id ("myCanvas"). We then get the canvas’s context, which is a 2D rendering context (there are also 3D ones). We set the color to red with `ctx.fillStyle = "#ff0000";`. Then, we begin our path with `ctx.beginPath();` and draw an arc with `ctx.arc(100, 75, 50, 0, Math.PI * 2, true);`. Finally, we close the path and fill it in with `ctx.closePath();` and `ctx.fill();`.
Attributes
Here is a list of all the attributes applicable to the <canvas> tag:
- id: Used to identify the canvas element in your script code.
- width: Specifies the width of the drawing surface in pixels.
- height: Specifies the height of the drawing surface in pixels.
- context: Determines the rendering context used for drawing on the canvas (2D or 3D).
Conclusion
The <canvas> tag is a powerful tool for creating dynamic and interactive web pages with animations, games, and graphics. Its ability to draw shapes and bitmap images using JavaScript opens up many possibilities for developers looking to create rich user experiences on the web.
