HTML Canvas Shapes

Last Updated : 24 Apr, 2025

HTML Canvas Shapes facilitate different shapes, i.e., rectangles, triangles, lines, arcs, and curves to draw on the HTML Canvas.

For instance, to draw the line in the Canvas, the path will be used that implements the beginPath() method. Setting the path's starting point is achieved with moveTo(), while lineTo() establishes the endpoint. To render the line, we use the stroke() method, with the default stroke color being black.

Syntax

context.beginPath();
context.moveTo();
context.lineTo();
context.stroke();

Methods

beginPath(): This method is used to define the new path.
moveTo(x,y): This method defines the starting point.
lineTo(x,y): This method defines the endpoint. Here, x specifies the x-axis coordinates and y specifies the y-axis coordinates of the line's endpoint.
stroke(): This method is used to draw the line. The stroke color is black which is a default property.

Example: In this example, we will implement a code to draw canvas shapes with default property.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>HTML Canvas Shapes</title>
    <style>
        @import url(
'https://fonts.googleapis.com/css2?family=Poppins&display=swap');

        .text-logo {
            font-size: 40px;
            color: green;
        }

        .canvas-element {
            border: 1px solid black;
        }

        body {
            font-family: 'Poppins', sans-serif;
        }

        body {
            font-family: 'Poppins', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;

        }

        .main {
            background-color: #fff;
            border-radius: 15px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
            padding: 20px;
            transition: transform 0.2s;
            width: 600px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .main:hover {
            transform: scale(1.05);
        }
    </style>
</head>

<body>
    <div class="main">
        <p class="text-logo">
            GeeksforGeeks
        </p>
        <h1>
            HTML Canvas Shapes
        </h1>
        <canvas id="canvas-id" 
                width="200" 
                height="200" 
                class="canvas-element">
        </canvas>
    </div>

    <script>
        const element = 
             document.getElementById("canvas-id").getContext("2d")

        // Define a new path
        element.beginPath();

        // Start point
        element.moveTo(100, 10);
        element.lineTo(180, 10);
        element.lineTo(180, 150);
        element.lineTo(20, 150);
        element.lineTo(100, 100);
        element.lineTo(100, 10);

        // Draw the lines
        element.stroke();
    </script>
</body>

</html>

Output:

Example: In this example, we will implement a code to draw canvas shapes with the strokeStyle property.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>HTML Canvas Shapes</title>
    <style>
        @import url(
'https://fonts.googleapis.com/css2?family=Poppins&display=swap');

        .text-logo {
            font-size: 40px;
            color: green;
        }

        .canvas-element {
            border: 1px solid black;
        }

        body {

            font-family: 'Poppins', sans-serif;
        }

        body {
            font-family: 'Poppins', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;

        }

        .main {
            background-color: #fff;
            border-radius: 15px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
            padding: 20px;
            transition: transform 0.2s;
            width: 600px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .main:hover {
            transform: scale(1.05);
        }
    </style>
</head>

<body>
    <div class="main">
        <p class="text-logo">
            GeeksforGeeks
        </p>
        <h1>
            HTML Canvas Shapes
        </h1>
        <canvas id="canvas-id"
                width="200" 
                height="200" 
                class="canvas-element">
        </canvas>
    </div>

    <script>
        const element = 
              document.getElementById("canvas-id").getContext("2d")

        // Define a new path
        element.beginPath();

        // Start point
        element.moveTo(100, 10);
        element.lineTo(180, 10);
        element.lineTo(180, 150);
        element.lineTo(20, 150);
        element.lineTo(100, 100);
        element.lineTo(100, 10);

        element.strokeStyle = "blueviolet";

        // Draw the lines
        element.stroke();
    </script>
</body>

</html>

Output:

HTML Canvas Rectangles

shivanigupta18rk

Improve

Article Tags :

HTML Canvas Shapes

Syntax

Methods

Similar Reads

Thank You!

What kind of Experience do you want to share?