Is there a way to apply a ColorFilter to a Canvas?...

# compose-android

[Jonathan]

Is there a way to apply a ColorFilter to a Canvas? I’d like to create a generic Modifier that allows me to apply any a custom color matrix to any composable. Searching around, I don’t see documentation discussing if this is possible. Link in thread.

[Jonathan]

The closest I was able to come up with is the following:

fun Modifier.hueRotate(degrees: Float): Modifier =
    this.drawWithCache {
        val hueMatrix = createHueRotationMatrix(degrees)
        val colorFilter = ColorFilter.colorMatrix(hueMatrix)
        onDrawWithContent {
            drawContent()
            drawRect(
                color = Color.Transparent,
                topLeft = Offset.Zero,
                size = size,
                colorFilter = colorFilter
            )
        }
    }

But because of the Color.Transparent it doesn’t seem to work.

[Sergey Y.]

I did something similar but in a different way. Here’s the code. Perhaps if you could describe what you’re trying to achieve, it would be easier to help.

desaturate_content.mp4

[romainguy]

You have to go through a layer

[romainguy]

You can either use Canvas.saveWithLayer (or equivalent) or use a graphicsLayer set to offscreen compositing

[romainguy]

Note that I recently added the ability to set a color filter on a layer directly

[romainguy]

https://android-review.googlesource.com/c/platform/frameworks/support/+/3475004

[Jonathan]

I will try with graphicLayer {} and offscreen compositing

[romainguy]

All you will need to do is:

[romainguy]

.graphicsLayer(
    colorFilter = LightingColorFilter(Color.White, Color.Red)
)

[romainguy]

So no need to create a new modifier 😄

[Jonathan]

What version of compose?

[romainguy]

1.9 I imagine? The change landed in February, and 1.8 was already in beta

[Jonathan]

Hmm. I’m on 2025.03.00 BOM and I don’t see the change. Do I need to use a better version for BOM

[romainguy]

that BOM is for the latest stable, so 1.7.x

[romainguy]

Use the -alpha BOM instead

[romainguy]

See https://developer.android.com/develop/ui/compose/bom#what_if_i_want_to_try_out_alpha_or_beta_releases_of_compose_libraries

[Sergey Y.]

You can either use Canvas.saveWithLayer (or equivalent) or use a graphicsLayer set to offscreen compositing

@romainguy Is there any performance difference between canvas.saveWithLayer and graphicsLayer with the offscreen composition strategy, or are these equivalent operations but through different APIs?

[romainguy]

It's the same but saveWithLayer needs to be cached internally etc. It's better to use an explicit layer

[Jonathan]

@romainguy The changed graphicLayer isn’t available in the alpha 2025.03.00 bill of materials.

[Jonathan]

Using the following:

graphicsLayer(compositingStrategy = CompositingStrategy.Offscreen)
    .drawWithCache {
    val hueMatrix = createHueRotationMatrix(degrees)
    val colorFilter = ColorFilter.colorMatrix(hueMatrix)
    onDrawWithContent {
        drawContent()
        drawRect(
            color = Color.Transparent,
            colorFilter = colorFilter,
        )
    }
}

doesn’t work a well.

[Jonathan]

If I directly apply the color matrix to my canvas calls ie drawPath the output is as expected, so I believe my color matrix is correct.

[Sergey Y.]

I provided you with a code sample that uses canvas.saveWithLayer for a similar feature.
Does it not work either?

[Jonathan]

I haven’t tried it yet, I’m going to try now.

[Sergey Y.]

I’d like to create a generic Modifier that allows me to apply any a custom color matrix to any composable.

Do you need to create some sort of color filter modifier? This sounds exactly like what I did with the desaturation modifier in my code example. Or am I missing something?

[Jonathan]

Using the saveWithLayer works for me.

[Jonathan]

@Sergey Y. The final results of your desaturation modifier looks very similar to the following desaturation ColorMatrix example.

val saturationMatrix = ColorMatrix().apply { setToSaturation(amount) }
val saturationFilter = ColorFilter.colorMatrix(saturationMatrix)

Is there any performance gain using your solution?

[Sergey Y.]

No difference, just an alternative approach with more precise control over the color filter.

[romainguy]

Should be exactly the same

[romainguy]

Keep the code simple and use the existing APIs 🙂

[romainguy]

BTW your comments are slightly incorrect, the coefficients are not luma coefficients but luminance coefficients

[romainguy]

And just like the implementation in ColorMatrix, these are the wrong coefficients for gamma-encoded sRGB 😕

[Sergey Y.]

🥲

[Jonathan]

What’s the difference between luma and luminance?

[romainguy]

In shot: luma is a weighted sum of color components, luminance is a weighted sum of linear color components

[romainguy]

Unfortunately both terms and equations are used interchangeably all over the place

[romainguy]

When done correctly, luma should be noted Y' and luminance Y

[romainguy]

Things get even more confusing because video standards use the same coefficients for luma as sRGB does for luminance

[Sergey Y.]

Thank you for the clarification, I’ll keep that in mind.

[Sergey Y.]

BTW, I wish there were more presentations like

this one▾

with you and Chet Haase. 😅

[romainguy]

Me too!

[romainguy]

But since both Chet and I have left Google now, this seems unlikely 😕

[Jonathan]

You two could just tour as comedy-developer extraordinaires.