Languages
[Edit]
EN

JavaScript - draw polygon on canvas element in HTML5

4 points
Created by:
AnnLen
1765

In this short article we want to show how to draw stroke line according indicated points using HTML5 Canvas and Javascript.

Quick solution:

context.beginPath();
context.moveTo( 20,  40); // point 1
context.lineTo( 70, 150); // point 2
context.lineTo(110,  80); // point 3
context.lineTo(180, 170); // point 4
context.lineTo(150,  70); // point 5
context.closePath();      // go back to point 1
context.stroke();         // draw stroke line

Practical example

In this we want to show how to draw polygon border.

Note: read this article to see how to fill polygon with certain color.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    #my-canvas { border: 1px solid gray; }
    
  </style>
</head>
<body>
  <canvas id="my-canvas" width="200" height="200"></canvas>
  <script>

    var canvas = document.querySelector('#my-canvas');
    var context = canvas.getContext('2d');

    context.beginPath();
    context.moveTo( 20,  40); // point 1
    context.lineTo( 70, 150); // point 2
    context.lineTo(110,  80); // point 3
    context.lineTo(180, 170); // point 4
    context.lineTo(150,  70); // point 5
    context.closePath();      // go back to point 1
    context.stroke();         // draw stroke line

  </script>
</body>
</html>

Universal approach example

In this we want to show how to create universal method that draws polygon border for provided array of points.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    #my-canvas { border: 1px solid gray; }
    
  </style>
  <script>

    function Drawer(canvas) {
        var context = canvas.getContext('2d');
        this.drawPolygon = function(points) {
            if (points.length === 0) return;
            context.beginPath();
            var point = points[0];
            context.moveTo(point.x, point.y); // point 1
            for (var i = 1; i < points.length; ++i) {
              point = points[i];
              context.lineTo(point.x, point.y); // point from 2 up to (points.length - 1)
            }
            context.closePath(); // go back to point 1
            context.stroke(); // draw stroke line
        };
    }

  </script>
</head>
<body>
  <canvas id="my-canvas" width="200" height="200"></canvas>
  <script>

    var canvas = document.querySelector('#my-canvas');
    var drawer = new Drawer(canvas);
    
    var points = [ 
        {x: 20, y: 40},
        {x: 70, y: 150},
        {x: 110, y: 80},
        {x: 180, y: 170},
        {x: 150, y: 70}
    ];

    drawer.drawPolygon(points);

  </script>
</body>
</html>

Merged questions

  1.  How to draw polygon border on HTML5 canvas in JavaScript?

Checkout latest findings & news:

Checkout latest questions:

Checkout latest wiki articles:

Hey 👋
Would you like to know what we do?
  • Dirask is a friendly IT community for learners, professionals and hobbyists to share their knowledge and help each other in extraordinary easy way.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Rockstar community members
Thank you for great work 👍