# path

[browser](https://lochiwei.gitbook.io/web/browser) ⟩ [canvas](https://lochiwei.gitbook.io/web/browser/canvas) ⟩ 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](https://lochiwei.gitbook.io/web/browser/canvas/examples/open-closed-subpaths "mention")
  * [nonzero-winding-rule](https://lochiwei.gitbook.io/web/browser/canvas/path/nonzero-winding-rule "mention")
* <mark style="color:yellow;">**custom extension**</mark>
  * [+ext](https://lochiwei.gitbook.io/web/browser/canvas/+ext "mention") :star:
* <mark style="color:yellow;">**related methods**</mark>
  * [arcto](https://lochiwei.gitbook.io/web/browser/canvas/path/arcto "mention")
* <mark style="color:yellow;">**examples**</mark>
  * [curve](https://lochiwei.gitbook.io/web/browser/canvas/path/curve "mention")
    {% 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](https://lochiwei.gitbook.io/web/browser/svg "mention") ⟩ [path](https://lochiwei.gitbook.io/web/browser/svg/shape/path "mention")
  {% endtab %}
  {% endtabs %}