title: how to draw polygon on canvas with mouse clicks? Pure JS
body: <p>I need to draw a polygon on my canvas but i have to make it with clicks of mouse. For exemple: click one click two tree and so... max of ten clicks and apper a line to fill all clicked points. Pure JS.</p>
  
  <pre><code>function drawPolygon(position, sides, angle) {
      var coordinates = [],
          radius = Math.sqrt(Math.pow((dragStartLocation.x - position.x), 2) + Math.pow((dragStartLocation.y - position.y), 2)),
          index = 0;
  
      for (index = 0; index &lt; sides; index++) {
          coordinates.push({x: dragStartLocation.x + radius * Math.cos(angle), y: dragStartLocation.y - radius * Math.sin(angle)});
          angle += (2 * Math.PI) / sides;
      }
  
      context.beginPath();
      context.moveTo(coordinates[0].x, coordinates[0].y);
      for (index = 1; index &lt; sides; index++) {
          context.lineTo(coordinates[index].x, coordinates[index].y);
      }
  
      context.closePath();
  }
  </code></pre>