Composite Operations

The CompositeOperation type represents the Porter-Duff operators, or the modes of generalized alpha compositing.

The general form of the Porter-Duff equation is:

    αo = αsrc × Fa + αb × Fb
    co = αsrc × Fa × Csrc + αb × Fb × Cb
    Co = co / αo

where:

αo is the output alpha
αsrc and αb are the source alpha and backdrop alpha
Fa and Fb are defined by the operator in use
co is the output color pre-multiplied with the output alpha αo
Csrc and Cb are the source color and backdrop color
Co is the output color

Note that the "destination" means the "backdrop", not the "output" in this context.

The following two images are used as examples below.

Destination (backdrop)	Source

clear

Result

ColorBlendModes.CompositeOperations.CompositeClear — Constant

CompositeClear

A basic Porter-Duff operator with the fractional terms Fa = 0; Fb = 0. The composite result is completely transparent.

source

copy

Result

ColorBlendModes.CompositeOperations.CompositeCopy — Constant

CompositeCopy

A basic Porter-Duff operator with the fractional terms Fa = 1; Fb = 0. The composite result is the copy of source.

Note

Even if the source alpha is zero, the color components are not cleared.

source

destination

Result

ColorBlendModes.CompositeOperations.CompositeDestination — Constant

CompositeDestination

A basic Porter-Duff operator with the fractional terms Fa = 0; Fb = 1. The composite result is the copy of destination (backdrop).

Note

Even if the destination alpha is zero, the color components are not cleared.

source

source-over

Result	SVG

ColorBlendModes.CompositeOperations.CompositeSourceOver — Constant

CompositeSourceOver

A basic Porter-Duff operator with the fractional terms Fa = 1; Fb = 1 - αsrc. This means the simple alpha compositing.

source

destination-over

Result	SVG

ColorBlendModes.CompositeOperations.CompositeDestinationOver — Constant

CompositeDestinationOver

A basic Porter-Duff operator with the fractional terms Fa = 1 - αb; Fb = 1.

source

source-in

Result	SVG

ColorBlendModes.CompositeOperations.CompositeSourceIn — Constant

CompositeSourceIn

A basic Porter-Duff operator with the fractional terms Fa = αb; Fb = 0.

source

destination-in

Result	SVG

ColorBlendModes.CompositeOperations.CompositeDestinationIn — Constant

CompositeDestinationIn

A basic Porter-Duff operator with the fractional terms Fa = 0; Fb = αsrc.

source

source-out

Result	SVG

ColorBlendModes.CompositeOperations.CompositeSourceOut — Constant

CompositeSourceOut

A basic Porter-Duff operator with the fractional terms Fa = 1 - αb; Fb = 0.

source

destination-out

Result	SVG

ColorBlendModes.CompositeOperations.CompositeDestinationOut — Constant

CompositeDestinationOut

A basic Porter-Duff operator with the fractional terms Fa = 0; Fb = 1 - αsrc.

source

source-atop

Result	SVG

ColorBlendModes.CompositeOperations.CompositeSourceAtop — Constant

CompositeSourceAtop

A basic Porter-Duff operator with the fractional terms Fa = αb; Fb = 1 - αsrc.

source

destination-atop

Result	SVG

ColorBlendModes.CompositeOperations.CompositeDestinationAtop — Constant

CompositeDestinationAtop

A basic Porter-Duff operator with the fractional terms Fa = 1 - αsrc; Fb = αb.

source

xor

Result	SVG

ColorBlendModes.CompositeOperations.CompositeXor — Constant

CompositeXor

A basic Porter-Duff operator with the fractional terms Fa = 1 - αb; Fb = 1 - αsrc.

source

lighter

Result	SVG

ColorBlendModes.CompositeOperations.CompositeLighter — Constant

CompositeLighter

A basic Porter-Duff operator with the fractional terms Fa = 1; Fb = 1.

source

Warning

If and only if αo is constant 1, you can specify an opaque Color to the backdrop, i.e. the first argument of blend. For example, CompositeSourceOver can be used with opaque backdrops, since αo is 1 regardless of αsrc. In contrast, CompositeSourceOut cannot be used with opaque backdrops because the output will be transparent, resulting in an error.