# gradients

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

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="info" %}
To <mark style="color:yellow;">**fill**</mark> (or <mark style="color:yellow;">**stroke**</mark>) with a <mark style="color:orange;">**gradient**</mark>, set [.fillStyle](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle) (or [.strokeStyle](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeStyle)) to a [CanvasGradient](https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient) object returned by:  [.createLinearGradient()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient), [.createRadialGradient()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createRadialGradient), [.createConicGradient()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createConicGradient).
{% endhint %}

{% hint style="success" %}
after creating [CanvasGradient](https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient) object, define <mark style="color:yellow;">**gradient colors**</mark> by calling [CanvasGradient.addColorStop()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient/addColorStop) (at least twice), parameters:

* number：<mark style="color:yellow;">**0 \~ 1**</mark>&#x20;
* color：[colors](../../../../css/values/colors "mention")
{% endhint %}

{% hint style="warning" %}
The <mark style="color:yellow;">**arguments**</mark> to [.createRadialGradient()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createRadialGradient):  <mark style="color:orange;">**centers**</mark> & <mark style="color:orange;">**radii**</mark> of <mark style="color:yellow;">**two circles**</mark>:

* need <mark style="color:red;">**not**</mark> be <mark style="color:orange;">**concentric**</mark>.
* **first circle** <mark style="color:orange;">**typically**</mark> <mark style="color:yellow;">**lies entirely**</mark> inside the **second**.
* areas <mark style="color:orange;">**inside**</mark>**&#x20;smaller circle** or <mark style="color:orange;">**outside**</mark>**&#x20;the larger** are filled with <mark style="color:yellow;">**solid colors**</mark>.
{% endhint %}

{% hint style="danger" %}
<mark style="color:yellow;">**Gradient coordinates**</mark> are relative to the [drawing (2D) context](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D), <mark style="color:red;">**NOT**</mark> relative to a <mark style="color:orange;">**shape's local coordinates**</mark>.
{% endhint %}
{% endtab %}

{% tab title="🔴 主題" %}
* [ctx.gradient](gradient/ctx.gradient "mention") - create canvas gradients
{% endtab %}

{% tab title="📘 手冊" %}
* [CanvasRenderingContext2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) ⟩&#x20;
  * fill: [.fillStyle](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle)
  * stroke: [.strokeStyle](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeStyle)
  * gradient: [.createLinearGradient()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient), [.createRadialGradient()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createRadialGradient), [.createConicGradient()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createConicGradient)
* [CanvasGradient](https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient) ⟩ [.addColorStop()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient/addColorStop) - define gradient colors
{% endtab %}

{% tab title="👥 相關" %}
* [svg](../../../svg "mention") ⟩ [gradient](../../../svg/gradient "mention")
* [css](../../../../css "mention") ⟩&#x20;
  * [gradients](../../../../css/values/gradients "mention")
  * [colors](../../../../css/values/colors "mention") - define gradient colors.
{% endtab %}
{% endtabs %}
