What is the use of <canvas> Tag in HTML ?
Last Updated :
24 Jan, 2024
HTML <canvas> Tag allows you to create graphics, animations, and interactive content directly on a web page using JavaScript. It provides a drawing surface where you can use various JavaScript functions to create dynamic and visually appealing content.
Here are key aspects of the <canvas>
element:
- Drawing Area: The
<canvas>
is like a rectangular canvas where you can draw stuff.
- JavaScript Drawing: You use JavaScript to draw shapes, pictures, and other cool things on this canvas.
- Dynamic Fun: It is ideal for creating interactive elements that respond to user input, making it great for games and engaging images.
- Drawing Tools: There’s a bunch of special tools (Canvas API) in JavaScript that let you draw and play around with what’s on the canvas.
Syntax
<canvas id="myCanvas" width="400" height="200"></canvas>
Example: Implementation of the canvas element in HTML.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
< title >Canvas Element</ title >
</ head >
< body >
< canvas id = "myCanvas" width = "200"
height = "200" style = "border:2px solid black;" >
</ canvas >
< script >
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(50, 50, 100, 100);
</ script >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...