🔰compositing

rendering mode

browser ⟩ canvas ⟩ state ⟩ compositing

the process of combining new (source) pixels with existing (destination) pixels.

⭐️ 重點

rendering mode

• source-over：source (new) pixels are drawn over destination (old) pixels.

• destination-over：destination (old) pixels are drawn over source (new) pixels.

• source-atop：超出 destination 的部分會被完全截掉。

📘 手冊

• CanvasRenderingContext2D ⟩

  • .globalAlpha (default = 1, opaque)

  • .globalCompositeOperation (default = "source-over")

💈範例

💾 replit: canvas compositing

👥 相關

• shadows - only drawn for source-over compositing operations.