How to Draw Graphics using Canvas in HTML5 ?

In this article, we will draw graphics by using the canvas element in the document. This tag in HTML is used to draw graphics on a web page using JavaScript. It can be used to draw paths, boxes, texts, gradient, and adding images. By default, it does not contain borders and text.

Note: This tag is new in HTML5.

Syntax:

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

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <title>
        How to Draw Graphics using
        Canvas in HTML5 ?
    </title>
      
    <style>
        #FirstCanvas {
            width: 300px;
            height: 300px;
            border: 3px solid red;
            background-color: blue;
        }
    </style>
</head>
  
<body>
    <canvas id="FirstCanvas"></canvas>
</body>
  
</html>

chevron_right


Output:



Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to Draw Graphics 
        using Canvas in HTML5?
    </title>
</head>
  
<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>

chevron_right


Output:

Supported Browsers:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.