# patterns

[browser](../../..) ⟩ [canvas](../..) ⟩ [graphics state](..) ⟩ [fill/stroke styles]() ⟩ pattern

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="warning" %}
* first argument to [.createPattern()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createPattern) method should be an <mark style="color:blue;">`<img>`</mark> or <mark style="color:blue;">`<canvas>`</mark>.
* the <mark style="color:blue;">`<img>`</mark> or <mark style="color:blue;">`<canvas>`</mark> does <mark style="color:red;">**NOT**</mark> need to be in the [dom](../../../dom "mention").
{% endhint %}
{% endtab %}

{% tab title="📘 手冊" %}
* [CanvasRenderingContext2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) ⟩ [.createPattern()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createPattern)
{% endtab %}
{% endtabs %}
