Why doesn't `drawRect` generate the same gradient effect as `Box.background(gradient)`? I'm trying ...

# compose

[Alexandru Hadăr]

Why doesn't drawRect generate the same gradient effect as Box.background(gradient)?

I'm trying to replicate the bottom fading effect at the top as well.
However, at the top, the white color persists across the whole gradient.
The code is in the 🧵

[Alexandru Hadăr]

For the top part, i've used drawWithCache and `drawRect`:

val gradientBrush = Brush.verticalGradient(
                    0f to gradientStartColor,
                    1f to Color.Transparent,
                )
                onDrawWithContent {
                    drawContent()

                    drawRect(
                        brush = gradientBrush,
                        topLeft = Offset.Zero,
                        size = Size(width = size.width, height = 60.dp.toPx()),
                    )

[Alexandru Hadăr]

For the bottom part, i've used

Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(60.dp)
                .background(
                    brush = Brush.verticalGradient(
                        0f to Color.Transparent,
                        1f to gradientStartColor,
                    )
                )
                .align(Alignment.BottomCenter)
                .zIndex(1f)
        )

[Rikin Marfatia]

I have a feeling the the Brush for your rect at the top is drawing a gradient for a size that is larger than the rect.

[Rikin Marfatia]

you can test this by setting the startY and endY params in your Brush.verticalGradient

[Rikin Marfatia]

brush = Brush.verticalGradient(
              0f to gradientStartColor,
              1f to Color.Transparent,
              startY = 0f,
              endY = 60.dp.toPx()
            ),

[Alexandru Hadăr]

Looks like that was it, thank you!

[Alexandru Hadăr]

Do you know what that'd happen? Does the gradient take the whole size of the canvas into consideration?/

[Rikin Marfatia]

The brush will by default use all the available drawing space. For your box example you are setting the size of the box so the available drawing area is the same as the size of the rect.