Android 12 Developer Preview is here! Try it out, and give us your feedback!

BlendMode

enum class BlendMode
kotlin.Any
   ↳ kotlin.Enum<androidx.compose.ui.graphics.BlendMode>
   ↳ androidx.compose.ui.graphics.BlendMode

Algorithms to use when painting on the canvas.

When drawing a shape or image onto a canvas, different algorithms can be used to blend the pixels. The different values of BlendMode specify different such algorithms.

Each algorithm has two inputs, the source, which is the image being drawn, and the destination, which is the image into which the source image is being composited. The destination is often thought of as the background. The source and destination both have four color channels, the red, green, blue, and alpha channels. These are typically represented as numbers in the range 0.0 to 1.0. The output of the algorithm also has these same four channels, with values computed from the source and destination.

The horizontal and vertical bars in these images show the red, green, and blue channels with varying opacity levels, then all three color channels together with those same varying opacity levels, then all three color channels set to zero with those varying opacity levels, then two bars showing a red/green/blue repeating gradient, the first with full opacity and the second with partial opacity, and finally a bar with the three color channels set to zero but the opacity varying in a repeating gradient.

Application to the Canvas API

When using Canvas.saveLayer and Canvas.restore, the blend mode of the Paint given to the Canvas.saveLayer will be applied when Canvas.restore is called. Each call to Canvas.saveLayer introduces a new layer onto which shapes and images are painted; when Canvas.restore is called, that layer is then composited onto the parent layer, with the source being the most-recently-drawn shapes and images, and the destination being the parent layer. (For the first Canvas.saveLayer call, the parent layer is the canvas itself.)

See also:

Summary

Enum values

Drop both the source and destination images, leaving nothing.

Take the hue and saturation of the source image, and the luminosity of the destination image.

Divide the inverse of the destination by the the source, and inverse the result.

Divide the destination by the inverse of the source.

Composite the source and destination image by choosing the lowest value from each color channel.

Subtract the smaller value from the bigger value for each channel.

Drop the source image, only paint the destination image.

Composite the destination image over the source image, but only where it overlaps the source.

Show the destination image, but only where the two images overlap.

Show the destination image, but only where the two images do not overlap.

Composite the source image under the destination image.

Subtract double the product of the two images from the sum of the two images.

Multiply the components of the source and destination images after adjusting them to favor the source.

Take the hue of the source image, and the saturation and luminosity of the destination image.

Composite the source and destination image by choosing the highest value from each color channel.

Take the luminosity of the source image, and the hue and saturation of the destination image.

Multiply the color components of the source and destination images.

Multiply the components of the source and destination images, including the alpha channel.

Multiply the components of the source and destination images after adjusting them to favor the destination.

Sum the components of the source and destination images.

Take the saturation of the source image, and the hue and luminosity of the destination image.

Multiply the inverse of the components of the source and destination images, and inverse the result.

Use ColorDodge for source values below 0.

Drop the destination image, only paint the source image.