# shadows

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

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="danger" %}
Shadows are <mark style="color:yellow;">**only drawn**</mark> if&#x20;

* [`shadowColor`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowColor) is set to a <mark style="color:orange;">**non-transparent**</mark> value.&#x20;
* <mark style="color:orange;">**One**</mark> of [`shadowBlur`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowBlur), [`shadowOffsetX`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowOffsetX), or [`shadowOffsetY`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowOffsetY) must be <mark style="color:red;">**non-zero**</mark>.
{% endhint %}

{% hint style="danger" %}
Shadows are <mark style="color:red;">**only drawn**</mark> for <mark style="color:yellow;">**source-over**</mark> [compositing operations](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing).
{% endhint %}
{% endtab %}

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

{% tab title="👥 相關" %}
* [shadows](../../../css/design/shadows "mention")
* [compositing](compositing "mention")
{% endtab %}
{% endtabs %}
