HTML Canvas Coordinates

Last Updated : 28 Apr, 2025

In this article, we will see the concept of coordinates in HTML Canvas Coordinates. In HTML canvas, the coordinates are very important because, with the understanding of these coordinates, we can easily draw any shapes or lines on the canvas. x-axis coordinates define the coordinates in horizontal and y-axis coordinates define the coordinates in vertical. We can understand this concept with different shapes.

Syntax

element.moveTo(x, y);
element.lineTo(100, 150);

Example 1: In this example, we will understand the concept of coordinates through the shape circle.

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 Circle</title>
    <style>
        @import url(
'https://fonts.googleapis.com/css2?family=Poppins&display=swap');

        body {
            font-family: 'Poppins', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

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

        #canvas-ele1 {
            border: 5px solid black;
        }
    </style>
</head>

<body>

    <div class="geeks"> GeeksforGeeks</div>
    <h1>HTML Canvas Circle </h1>
    <canvas height="200" 
            width="200" 
            id="canvas-ele1">
      </canvas>
  
    <script>
        const canvas_element1 =
            document.getElementById("canvas-ele1")
        const context1 =
            canvas_element1.getContext("2d");
        context1.beginPath()
        context1.beginPath();
        context1.arc(90, 100, 50, 0, 2 * Math.PI);
        context1.stroke()
    </script>
</body>

</html>

Output:

Example 2: In this example, we will understand the concept of coordinates through lines.

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 Lines</title>
    <style>
        @import url(
'https://fonts.googleapis.com/css2?family=Poppins&display=swap');

        body {
            font-family: 'Poppins', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

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

        p {
            font-size: 50px;
            color: green;
        }

        .flex-class {
            display: flex;
        }
    </style>
</head>

<body>
    <p>GeeksforGeeks</p>
    <h1>HTML Canvas Lines</h1>
    <div class="flex-class"></div>
    <canvas height="200" 
            width="200"
            class="canvas-element"
            id="c1">
      </canvas>

  <script>
        const canvas1 = 
              document.getElementById("c1").getContext("2d")
        canvas1.beginPath();
        canvas1.moveTo(10, 10)
        canvas1.lineTo(120, 150)
        canvas1.stroke();
    </script>
</body>

</html>

Output:

Example 3: In this example, we will understand the concept of coordinates through the shape rectangle.

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 Rectangle</title>
    <style>
        @import url(
'https://fonts.googleapis.com/css2?family=Poppins&display=swap');

        body {
            font-family: 'Poppins', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .gfg {
            font-size: 35px;
            color: green;
        }

        #can-element {
            border: 4px solid rgb(115, 23, 23);
        }
    </style>
</head>

<body>
    <div class="gfg">
        GeeksforGeeks
    </div>
    <h1>HTML Canvas Stroke Rectangle</h1>

    <canvas height="250" 
            width="250"
            id="can-element">
      </canvas>

    <script>
        let element = 
            document.getElementById("can-element").getContext("2d")
        element.lineWidth = 5;
        element.strokeRect(10, 10, 200, 100)
    </script>
</body>

</html>

Output:

HTML Canvas Lines

shivanigupta18rk

Improve

Article Tags :

HTML Canvas Coordinates

Syntax

Similar Reads

Thank You!

What kind of Experience do you want to share?