# regular polygons

[browser](../..) ⟩ [canvas](..) ⟩ [path](../path) ⟩ example ⟩ regular polygons&#x20;

{% hint style="success" %}
:point\_right: see： [+ext](../+ext "mention")
{% endhint %}

{% tabs %}
{% tab title="💈範例" %}
![](https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfvEFZnSBhKT6fJmus0%2Fuploads%2FCsFRceHSw8PjLNKZfEuh%2Fcanvas%20polygon.png?alt=media\&token=17a01472-812e-463c-9f0f-07e2c41f5e82)

:floppy\_disk: replit：[canvas polygon](https://replit.com/@pegasusroe/canvas-polygon#script.js)

```javascript
const {floor} = Math;

// ⭐ import
import { vec, linearCombination } from './js/Vector.js';   // 👔 Vector
import { $ } from './js/Node+ext.js';            // 👔 Node+ext
import { } from './js/Canvas+ext.js';            // 👔 Canvas+ext
// --------------------------------------------------------------------

// draw on canvas
$('canvas').draw2D(ctx => {         // 👔 Node+ext, 👔 Canvas+ext
    
    const r  = 50;                  // radius
    const dx = 20;                  // padding between polygons
    const c0 = vec(2*r, 2*r);       // center of first polygon, 👔 Vector
    const v  = vec(2*r + dx, 0);    // vector for translation
    const u  = vec(0, 2*r + dx);    // ...

    ctx.lineWidth = 4;
    
    // polygons (subpaths)
    [3, 4, 5, 6, 7, 8].forEach((n,i) => {
        ctx.drawPolygon(n, {
            // c0 + a*u + b*v
            center: c0.plus(linearCombination([floor(i/3), i%3], [u,v])), 
            radius: r,
            fillStyle: `hsl(${60*i} 90% 50%)`,
        });
    });

});
```
{% endtab %}

{% tab title="🗺️ 圖表" %}
{% embed url="https://replit.com/@pegasusroe/canvas-polygon#script.js" %}
{% endtab %}

{% tab title="⬇️ 應用" %}
* [..](.. "mention") ⟩&#x20;
  * [nonzero-winding-rule](../path/nonzero-winding-rule "mention")
  * [fractal](fractal "mention")
  * [clipping](../state/clipping "mention")
{% endtab %}

{% tab title="👥 相關" %}
* [svg](../../svg "mention") ⟩ [polygon](../../svg/shape/polygon "mention")
{% endtab %}
{% endtabs %}

## History

{% tabs %}
{% tab title="idx" %}
```
0: (-) archived
```
{% endtab %}

{% tab title="0" %}
```javascript
// 2023.01.21 - 09:19 (-) archived
// --------------------------------------------

// 🔸 ctx.polygon(): regular polygon (subpath)
//
// parameters: parameters
// - n   : number of sides
// - x, y: center
// - r   : radius
//
// require: 
// - Vector, vec(), polar()
CanvasRenderingContext2D.prototype.polygon = function(n, x, y, r, {
    startAngle = -Math.PI/2,     // starting angle
    clockwise = true,            // clockwise by default
}={}) {

    const center = vec(x,y);     // center of polygon
    const delta = 2 * Math.PI / n * (clockwise ? 1 : -1);    // dθ = ± 2π / n
    
    // begin new subpath (at first vertex)
    this.moveTo(...center.add(polar(r, startAngle)).coords);

    // connect first (n-1) sides
    for (let i = 1; i < n; i++) {
        this.lineTo(...center.add(polar(r, startAngle + delta * i)).coords);
    }
    
    // connect back to first vertex
    this.closePath();
};
```
{% endtab %}
{% endtabs %}
