> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/browser/canvas/examples/polygon.md).

# regular polygons

[browser](/web/browser.md) ⟩ [canvas](/web/browser/canvas.md) ⟩ [path](/web/browser/canvas/path.md) ⟩ example ⟩ regular polygons 

{% hint style="success" %}
:point\_right: see： [Canvas+ext](/web/browser/canvas/+ext.md)
{% 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="⬇️ 應用" %}

* [\<canvas>](/web/browser/canvas.md) ⟩&#x20;
  * [nonzero winding rule](/web/browser/canvas/path/nonzero-winding-rule.md)
  * [fractal](/web/browser/canvas/examples/fractal.md)
  * [clipping](/web/browser/canvas/state/clipping.md)
    {% endtab %}

{% tab title="👥 相關" %}

* [SVG](/web/browser/svg.md) ⟩ [\<polygon>](/web/browser/svg/shape/polygon.md)
  {% 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 %}