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

# clipping

[browser](/web/browser.md) ⟩ [canvas](/web/browser/canvas.md) ⟩[ state](/web/browser/canvas/state.md) ⟩ clipping

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="info" %}
when [.clip()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clip) is called, <mark style="color:yellow;">**current clipping region**</mark> = <mark style="color:orange;">**current path**</mark> clipped to <mark style="color:yellow;">**current clipping region**</mark>.
{% endhint %}

{% hint style="warning" %}
there's <mark style="color:red;">**no way**</mark> to <mark style="color:yellow;">**reset**</mark> **clipping region**, call [.save()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/save), [.restore()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/restore) instead.
{% endhint %}
{% endtab %}

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

* [CanvasRenderingContext2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) ⟩
  * [.clip()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clip)
    {% endtab %}

{% tab title="💈範例" %}
![clipping region (gray area)](https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfvEFZnSBhKT6fJmus0%2Fuploads%2FPdZWnw8qKSQAHLl8svES%2Fclipping.png?alt=media\&token=3f3306bc-02aa-4b3f-b06f-73cbe028f524)

:floppy\_disk: replit：[canvas clipping](https://replit.com/@pegasusroe/canvas-clipping#script.js)

⬆️ require： [drawOnCanvas2D()](/web/browser/canvas/+ext/drawoncanvas2d.md), [Vector](/web/appendix/custom/class/vector.md), [Rect](/web/appendix/custom/class/rect.md), [regular polygons](/web/browser/canvas/examples/polygon.md)

```javascript
drawOnCanvas2D('#playground', (c) => {

    // drawing settings
    const center = vec(200, 225);    // triangle center
    const R = 200, r = 80;          // radii (large/small)

    // text
    const text = "<canvas>";
    const textHeight = (R - r)/2;
    
    c.font = `bold ${textHeight}pt sans-serif`;    // Big font
    
    const textWidth = c.measureText(text).width;
    const textCenter = center.plus(0, R / 2 - R / 16);
    const textRect = Rect.withCenter(textCenter, vec(textWidth/2, textHeight/2));
    
    c.strokeRect(...textRect.coords);
    c.strokeText(text, ...textRect.bottomLeft.coords);
    
    // vertical stripe down the middle 
    const stripCenter = center.plus(0, -R/4);    // center of triangle height
    const stripHalfDimension = vec(40, .85*R);
    const strip = Rect.withCenter(stripCenter, stripHalfDimension);
    
    c.strokeRect(...strip.coords);

    // create path for clipping region
    c.polygon(3, ...center.coords, R);
    c.polygon(3, ...center.coords, r, { clockwise: false });

    // ⭐ make that path the clipping region
    c.clip();

    c.fillStyle = 'hsl(0 80% 10% / 0.05)';
    c.fill();
    c.stroke();        // ⭐ half of line width will be clipped away
    
    // fill strip (inside the clipping region)
    c.fillStyle = "hsl(270 80% 50% / 0.8)";
    c.fillRect(...strip.coords);
    
    // fill text (inside the clipping region)
    c.fillStyle = "hsl(330 80% 50% / 0.8)";
    c.fillText(text, ...textRect.bottomLeft.coords);
});
```

{% endtab %}
{% endtabs %}