Blend modes cheatsheet
A blend mode tells Skia how to combine the source pixels you're about to paint with the destination pixels already on the canvas. Set on a paint with paint.setBlendMode(CK.BlendMode.<value>), used by Canvas.drawColor(color, blendMode), and consumed by ColorFilter.MakeBlend, ImageFilter.MakeBlend, and Shader.MakeBlend.
For the full table of formulas + the per-mode visual demo, see the BlendMode enum reference. This page is the recipes — common visual outcomes and which mode to reach for.
Pick a recipe
| Goal | Blend mode | How |
|---|---|---|
| Tint a layer green | Modulate |
Source color = green. RGB channels of dst multiplied by source. Reds drop, greens stay. |
| Tint while keeping alpha | SrcIn |
Recolor only the destination's existing opaque pixels. The shape from the destination, the color from the source. |
| Invert the destination | Difference with white |
` |
| Brighten | Plus |
Saturating add. Stack sources to build up a glow. |
| Soft "lighting" highlight | SoftLight |
Brightens where source > 0.5, darkens where source < 0.5. Subtle. |
| Sharp "lighting" highlight | HardLight |
Same idea but stronger contrast. |
| Photoshop-style overlay | Overlay |
Multiply dark dst pixels, screen light ones. Increases contrast. |
| Erase a region | Clear |
Wherever the source has alpha, dst becomes transparent. |
| Replace pixels with source | Src |
Source overwrites dst including alpha. Useful inside saveLayer. |
| Recolor (keep luminance) | Color |
Source's hue + saturation, dst's lightness. Photo tinting. |
| Greyscale + relight | Luminosity |
Dst's hue + sat, source's lightness. The inverse of Color. |
A rule of thumb
Skia's modes split into four families; if you know which family the goal belongs to, you've narrowed it to ~5 modes.
- Porter–Duff (
Clear,Src,Dst,SrcOver,DstOver,SrcIn,DstIn,SrcOut,DstOut,SrcATop,DstATop,Xor) — alpha compositing, mask-style operations. - Multiplicative (
Multiply,Screen,Overlay,Darken,Lighten,ColorDodge,ColorBurn,HardLight,SoftLight) — operate per channel on RGB. The classic Photoshop blends. - Difference (
Difference,Exclusion) — subtractive. Highlights overlap. - HSL (
Hue,Saturation,Color,Luminosity) — combine hue/saturation/lightness from src and dst independently.
Why the destination matters
Most blend modes are meaningless on a blank canvas — Multiply against (1, 1, 1) is identity, Screen against (0, 0, 0) is identity, etc. Tile a textured background first if you want the mode to show.
Error: Line 7: Unexpected identifier
'Modulate'
);
>
const chess = await loadImage('/img/chess.png');
const rect = CK.RRectXY(CK.LTRBRect(120, 50, 300, 200), 14, 14);See also
BlendMode— full enum + per-mode formulas.Paint.setBlendMode.ColorFilter.MakeBlend,ImageFilter.MakeBlend,Shader.MakeBlend.- saveLayer vs clip — when blend modes need an offscreen layer.