Open In App
Related Articles

HTML <canvas> Tag

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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. 

Syntax

<canvas id = "script"> Contents... </canvas>

Note:

  • The <canvas> tag is new in HTML5.
  • The following are the default values for <canvas> element that can be displayed by most of the Browsers:
canvas  {  
   height: 150px; 
   width: 300px;
}

Attributes

The <canvas> tag accepts two attributes which are described below:

Attributes

Descriptions

height

This attribute is used to set the height of the canvas by taking the value in pixels and its default value is 150.

width

This attribute is used to set the width of the canvas by taking the value in pixels and its default value is 300.

The <canvas> tag supports both Global Attributes & Event Attributes in HTML.

Example 1:  In this example, we will create a canvas element with a width of 200 pixels and a height of 100 pixels, displayed with a black border.

HTML

<!DOCTYPE html>
<html>
 
<body>
    <canvas id="GeeksforGeeks"
            width="200" height="100"
            style="border:1px solid black">
    </canvas>
</body>
 
</html>

                    

Output: 
 


Example 2: In this example, a 200×200 canvas with ID “geeks” displays a black-bordered circle at coordinates (100,100) using HTML5 Canvas.

HTML

<!DOCTYPE html>
<html>
 
<body>
    <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: In this example, a 200×200 canvas with ID “geeks” displays a radial gradient that transitions from red to green, filling the entire canvas using HTML5 Canvas.

HTML

<!DOCTYPE html>
<html>
 
<body>
    <canvas id="geeks"
            width="200"
            height="200"
            style="border:1px solid black">
    </canvas>
 
    <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 1.0 and above
  • Edge 12.0 and above
  • Firefox 1.5 and above
  • Opera 9.0 and above
  • Safari 2.0 and above


Last Updated : 12 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads