# graphics state

[browser](..) ⟩ [canvas]() ⟩ graphics state

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="success" %}
the <mark style="color:orange;">**drawing state**</mark> that gets saved onto a stack:

* &#x20;current [matrix](state/matrix "mention") matrix
* &#x20;current [clipping](state/clipping "mention") <mark style="color:yellow;">**region**</mark>
* &#x20;current <mark style="color:yellow;">**dash list**</mark>：\
  [.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)
* &#x20;current values of:&#x20;
  * [styles](state/styles "mention"):&#x20;
    * [colors](state/styles/colors "mention") ⟩ [color-wheel](state/styles/colors/color-wheel "mention")
    * [pattern](state/styles/pattern "mention"), [gradient](state/styles/gradient "mention")
  * line styles:\
    [`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), [`lineDashOffset`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset)
  * [shadow](state/shadow "mention"):\
    [`shadowOffsetX`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowOffsetX), [`shadowOffsetY`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowOffsetY), [`shadowBlur`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowBlur), [`shadowColor`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowColor)
  * [compositing](state/compositing "mention"): \
    [`globalCompositeOperation`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation), [`globalAlpha`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalAlpha)
  * text styles: \
    [`font`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font), [`textAlign`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textAlign), [`textBaseline`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textBaseline), [`direction`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/direction)
  * [`imageSmoothingEnabled`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled)
{% endhint %}
{% endtab %}

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