> 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/open-closed-subpaths.md).

# open/closed subpaths

[browser](/web/browser.md) ⟩ [canvas](/web/browser/canvas.md) ⟩ [examples](/web/browser/canvas/examples.md) ⟩ open/closed subpaths

{% tabs %}
{% tab title="💾 程式" %}
![closed (left) / open (right) subpaths](https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfvEFZnSBhKT6fJmus0%2Fuploads%2F7NAdpW2op4bvo9MfqPQU%2Fopen%20closed%20subpaths.png?alt=media\&token=382de067-86f3-483c-8f30-4e719216e6a6)

:floppy\_disk: replit: [open/closed subpaths](https://replit.com/@pegasusroe/canvas-openclosed-subpaths#script.js)

```javascript
// draw on <canvas>
drawOnCanvas2D('#playground', (ctx) => {

    const dx = 10;

    ctx.lineWidth = 10;           // stroke width
    ctx.fillStyle = '#f00';       // fill color = red
    
    ctx.beginPath();              // ⭐ begin new path
    
    ctx.moveTo(100 - dx,  40);    // ⭐ begin new subpath
    ctx.lineTo(200 - dx, 140);
    ctx.lineTo(100 - dx, 140);
    ctx.closePath();              // ⭐ closed subpath

    ctx.moveTo(300 + dx,  40);    // ⭐ begin new subpath
    ctx.lineTo(300 + dx, 140);
    ctx.lineTo(200 + dx, 140);    // open subpath
    
    ctx.fill();                   // fill path (⭐ on all subpaths)
    ctx.stroke();                 // stroke path (⭐ on all subpaths)
});
```

{% endtab %}

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

* [CanvasRenderingContext2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) ⟩&#x20;
  * [.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>.
  * [.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>.
  * [.stroke()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/stroke)
  * [.fill()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fill)
  * [.fillStyle](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle)
  * [.lineWidth](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineWidth)
    {% endtab %}
    {% endtabs %}