The docs for `BlendMode.SrcIn` appear to be incorrect. ```Show the source image, but only where the...

# compose

[Daniel]

The docs for BlendMode.SrcIn appear to be incorrect.

Show the source image, but only where the two images overlap. 
The destination image is not rendered, it is treated merely as a mask. 
The color channels of the destination are ignored, only the opacity has an effect

The color channels of the destination are used. Assuming this just wraps the native equivalent, this would be the expected behavior.

Asking here to check I'm not missing something stupid before I file a bug.

[romainguy]

What does the preview show?

[romainguy]

Note that blend modes require an alpha channel and that a window on Android is opaque by default. Not sure whether preview uses an opaque or transparent render target

[Daniel]

Here's an example.

Code:

Canvas {    
    drawIntoCanvas {
            it.nativeCanvas.drawText(text, textPadding, baseline, paint)
        }

        drawRect(
            Brush.linearGradient(0f to Color.Transparent, 1f to Color.Blue),
            size = Size(sizePx.width, turnSpace),
            blendMode = BlendMode.SrcIn
        )
}

[Daniel]

[Daniel]

[Daniel]

I'm also confused by why the emulator shows no effect

[Daniel]

If the issue is that the canvas doesn't have alpha, how can I fix that? @romainguy

[romainguy]

The preview looks correct. Not sure why the device doesn't show the rectangle. To get an alpha render target you need to render into a layer (or into a bitmap ahead of time, a layer is easier)

[Daniel]

I've tried adding a graphicsLayer and then a drawBehind, but it didn't fix the issue

[romainguy]

Why a drawBehind?

[Daniel]

@romainguy My initial question was that in the preview the blue color is transferred to the black letter, but based on the docs only the alpha should be transferred.

[Daniel]

@romainguy I'm just using drawBehind to get a drawscope. Is that wrong?

[Daniel]

Spacer(
        Modifier
            .size(size.x, size.y)
            .graphicsLayer()
            .drawBehind {
                drawIntoCanvas {
                    it.nativeCanvas.drawText(text, textPadding, baseline, paint)
                }

                drawRect(
                    Brush.linearGradient(0f to Color.Transparent, 1f to Color.Blue),
                    size = Size(sizePx.width, turnSpace),
                    blendMode = BlendMode.SrcIn
                )

[romainguy]

Also note that if you are trying to draw text with a gradient it's much easier to do so by setting the gradient on the paint used to draw text

[romainguy]

And no the doc isn't wrong. The colors of the destination (the text) are ignored

[romainguy]

Your gradient is the source here

[Daniel]

Oh, thank you. I mixed up src and dest

[Daniel]

I move the text up and down and want different parts of the gradient to be applied in each case. I think that's easier if I keep the gradient static, instead of computing different values for the gradient?

[Daniel]

@romainguy the same code gives me a third result if I deploy the preview to an actual device (same type and api level as emulator)

[Daniel]

(I get the same inconsistency if I deploy the whole app vs a preview)

[romainguy]

You can keep the gradient static and still set it as a shader on the text paint

[Daniel]

I would need to change the gradient bounds as the text moved then, to simulate the effect of the gradient staying still while the text moved. Otherwise the gradient and text move in unison, making it look like the gradient isn't moving

[romainguy]

I haven't checked in compose but in native shaders you can set a local transform on the shader for that