BlendMode

A blend mode tells Skia how to combine the source pixels you're about to paint with the destination pixels already on the canvas. The result replaces the destination.

You set it on a paint with paint.setBlendMode(CK.BlendMode.<value>) or pass it directly to canvas.drawColor(color, blendMode) and CK.ColorFilter.MakeBlend(color, blendMode). Default is SrcOver (standard "paint on top with alpha").

A blend mode is only visible where the destination already has pixels. On a blank-white canvas, Multiply and Overlay look the same as SrcOver. The demo below tiles a chess pattern first so the modes show their character.


Error: Line 10: Unexpected identifier
  'Multiply'
);
> 
const chess = await loadImage('/img/chess.png');
const rect = CK.RRectXY(CK.LTRBRect(120, 50, 300, 200), 14, 14);

All values

Value	Formula	What it does
`Clear`	`0`	Erase: destination becomes transparent. Source is ignored.
`Src`	`S`	Source replaces destination, including alpha. Useful for "stamp" effects inside a saveLayer.
`Dst`	`D`	Destination unchanged; source is ignored. Rare — mostly used as a no-op slot.
`SrcOver`	`S + D·(1−Sa)`	Standard alpha compositing. The default — paint sits on top of destination, blended by its alpha.
`DstOver`	`D + S·(1−Da)`	Destination on top of source. Source fills only where destination is transparent.
`SrcIn`	`S·Da`	Source clipped to destination's alpha. The classic "mask" — paint only where destination already has pixels.
`DstIn`	`D·Sa`	Destination clipped to source's alpha. Use the source as a mask for what's underneath.
`SrcOut`	`S·(1−Da)`	Source only where destination is transparent. Useful for cut-out effects.
`DstOut`	`D·(1−Sa)`	Destination minus source's alpha. Punch a hole shaped like the source.
`SrcATop`	`S·Da + D·(1−Sa)`	Source on top, but only where destination already has pixels.
`DstATop`	`D·Sa + S·(1−Da)`	Destination clipped to source, source fills the rest.
`Xor`	`S·(1−Da) + D·(1−Sa)`	Source XOR destination — keep where exactly one is opaque.
`Plus`	`S + D` (clamped)	Add channels saturating to 1.0. Brightens. Useful for additive light effects.
`Modulate`	`S · D` (premultiplied)	Multiply premultiplied source × destination. Like `Multiply` but respects alpha differently.
`Screen`	`S + D − S·D`	Inverse of `Multiply`. Lightens; never darker than either input.
`Overlay`	conditional	`Multiply` for dark destination pixels, `Screen` for light. Increases contrast.
`Darken`	`min(S, D)`	Per-channel minimum.
`Lighten`	`max(S, D)`	Per-channel maximum.
`ColorDodge`	`D / (1−S)`	Brightens destination based on source. Brighter source → stronger effect; black source is identity.
`ColorBurn`	`1 − (1−D)/S`	Inverse of `ColorDodge`. Darkens; white source is identity.
`HardLight`	conditional	`Multiply` if source is dark, `Screen` if light. Like `Overlay` with src/dst swapped.
`SoftLight`	conditional	Softer version of `HardLight`. Brightens or darkens depending on source.
`Difference`	`\|S − D\|`	Absolute per-channel difference. `Difference(S=white)` = invert destination.
`Exclusion`	`S + D − 2·S·D`	Like `Difference` but lower contrast.
`Multiply`	`S · D`	Per-channel multiply on un-premultiplied colors. Always darkens; white is identity.
`Hue`	HSL	Take destination's saturation + lightness, source's hue.
`Saturation`	HSL	Take destination's hue + lightness, source's saturation.
`Color`	HSL	Take destination's lightness, source's hue + saturation. Used for tinting photos.
`Luminosity`	HSL	Take destination's hue + saturation, source's lightness.

S = source channel, D = destination channel, Sa / Da = alpha. Formulas show the un-alpha case for readability; the real Porter–Duff equations include (1 − Sa) / (1 − Da) factors and clip to [0, 1].

BlendMode

Categories

All values

See also

#BlendMode

#Categories

#All values

#See also

BlendMode

Categories

All values

See also