---
description: rendering mode
---

# compositing

[browser](../..) ⟩ [canvas](..) ⟩[ state]() ⟩ compositing

{% hint style="success" %}
the process of combining <mark style="color:yellow;">**new**</mark> (<mark style="color:orange;">**source**</mark>) pixels with <mark style="color:yellow;">**existing**</mark> (<mark style="color:orange;">**destination**</mark>) pixels.
{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="info" %}
rendering mode

* <mark style="color:purple;">**source-over**</mark>：<mark style="color:yellow;">**source**</mark> (new) pixels are drawn <mark style="color:yellow;">**over**</mark> destination (old) pixels.
* <mark style="color:purple;">**destination-over**</mark>：<mark style="color:yellow;">**destination**</mark> (old) pixels are drawn <mark style="color:yellow;">**over**</mark> source (new) pixels.
* source-atop：超出 destination 的部分會被完全截掉。
{% endhint %}
{% endtab %}

{% tab title="📘 手冊" %}
* [CanvasRenderingContext2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) ⟩
  * [.globalAlpha](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalAlpha) (default = 1, opaque)
  * [.globalCompositeOperation](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation) (default = "source-over")
{% endtab %}

{% tab title="💈範例" %}
:floppy\_disk: replit: [canvas compositing](https://replit.com/@pegasusroe/canvas-compositing-rendering-mode#script.js)
{% endtab %}

{% tab title="👥 相關" %}
* [shadow](shadow "mention") - <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).
{% endtab %}
{% endtabs %}
