# ctx.polyline()

[browser](../..) ⟩ [canvas](..) ⟩ [path](../path) ⟩ ctx.polyline()

{% tabs %}
{% tab title="💾 程式" %}
:floppy\_disk: replit：[canvas curves](https://replit.com/@pegasusroe/canvas-curves#script.js)

⬆️ 需要： [vector](../../../appendix/custom/class/vector "mention")

```javascript
// 🔸 ctx.polyline()
CanvasRenderingContext2D.prototype.polyline = function(pts, {
    color = 'gray',
    lineWidth = 1,
}={}) {

    this.save();
    this.beginPath();

    pts.forEach((p, i) => {
        i === 0 ? this.moveTo(...p.coords) : this.lineTo(...p.coords);
    });

    this.strokeStyle = color;
    this.lineWidth = lineWidth;
    this.stroke();
    this.restore();
};
```
{% endtab %}

{% tab title="⬇️ 應用" %}
* [curve](../path/curve "mention")
{% endtab %}

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