Languages
[Edit]
EN

JavaScript - draw polygon on canvas element in HTML5

4 points
Created by:
Kadeem-Craig
486

In this short article, we want to show how to draw stroke line according indicated points on HTML5 Canvas using JavaScript.

Drawing example polygon on canvas element in HTML5.
Drawing example polygon on canvas element in HTML5.

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) {
                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?

JavaScript - HTML5 canvas tutorial

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

â€ïžđŸ’» 🙂

Join