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>