> 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/path.md).

# path

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

{% hint style="success" %}
A <mark style="color:purple;">**path**</mark> is a sequence of **one or more** <mark style="color:yellow;">**subpaths**</mark>. A <mark style="color:orange;">**subpath**</mark> is a sequence of **two or more points** connected by <mark style="color:yellow;">**lines**</mark> or <mark style="color:yellow;">**curves**</mark>.
{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="success" %}

* [.beginPath()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/beginPath) - begin a <mark style="color:yellow;">**new path**</mark>.
* [.moveTo()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/moveTo) - begin a <mark style="color:yellow;">**new**</mark>**&#x20;**<mark style="color:orange;">**subpath**</mark>.
* [.closePath()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/closePath) - add line to <mark style="color:yellow;">**start**</mark> of <mark style="color:yellow;">**current**</mark> <mark style="color:orange;">**subpath**</mark>.
  {% endhint %}

{% hint style="warning" %}

* [stroke()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/stroke) and [fill()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fill) operate on <mark style="color:orange;">**all subpaths**</mark> in the <mark style="color:yellow;">**current path**</mark>.
  {% endhint %}

{% hint style="danger" %}

* remember to call [beginPath()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/beginPath) when you want to begin another new path❗️
  {% endhint %}

{% hint style="info" %}
When you call [fill()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fill), any <mark style="color:yellow;">**open shapes**</mark> are <mark style="color:red;">**closed automatically**</mark>, so you don't have to call [.closePath()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/closePath).
{% endhint %}

{% hint style="warning" %}
Before [rect(x, y, width, height)](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rect) is executed, the [.moveTo()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/moveTo) method is <mark style="color:red;">**automatically**</mark> called with the parameters <mark style="color:blue;">`(x,y)`</mark>.&#x20;
{% endhint %}
{% endtab %}

{% tab title="🔴 主題 " %}

* <mark style="color:yellow;">**main concepts**</mark>
  * [open/closed subpaths](/web/browser/canvas/examples/open-closed-subpaths.md)
  * [nonzero winding rule](/web/browser/canvas/path/nonzero-winding-rule.md)
* <mark style="color:yellow;">**custom extension**</mark>
  * [Canvas+ext](/web/browser/canvas/+ext.md) :star:
* <mark style="color:yellow;">**related methods**</mark>
  * [arcTo()](/web/browser/canvas/path/arcto.md)
* <mark style="color:yellow;">**examples**</mark>
  * [curves](/web/browser/canvas/path/curve.md)
    {% endtab %}

{% tab title="📘 手冊" %}

* [CanvasRenderingContext2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) ⟩&#x20;
  * path / subpath
    * [.beginPath()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/beginPath) - begin new <mark style="color:yellow;">**path**</mark>.
    * [.moveTo()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/moveTo) - begin new <mark style="color:orange;">**subpath**</mark>.
    * [.lineTo()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineTo)
    * [.closePath()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/closePath) - add line to <mark style="color:yellow;">**start**</mark> of current <mark style="color:orange;">**subpath**</mark>.
  * drawing path:
    * [.fill()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fill), [.stroke()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/stroke)
    * [.drawFocusIfNeeded()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawFocusIfNeeded)
  * fill / stroke styles:&#x20;
    * [.fillStyle](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle), [.strokeStyle](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeStyle),&#x20;
  * line styles:&#x20;
    * [.lineWidth](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineWidth), [.lineCap](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap), [.lineJoin](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin), [.miterLimit](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/miterLimit)
    * dash: [.setLineDash()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash), [.getLineDash()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getLineDash), [.lineDashOffset](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset)
  * gradient: [.createLinearGradient()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient), [.createRadialGradient()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createRadialGradient), [.createConicGradient()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createConicGradient)
* [Path2D](https://developer.mozilla.org/en-US/docs/Web/API/Path2D)
  {% endtab %}

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

* [SVG](/web/browser/svg.md) ⟩ [\<path>](/web/browser/svg/shape/path.md)
  {% endtab %}
  {% endtabs %}