Jetpack compose BlendMode.Xor different from preview

288 Views Asked by At

I am testing a simple Canvas composable using BlendMode.Xor option. Below is my code :

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Surface(
                modifier = Modifier
                    .fillMaxSize(),
            ) {
                XORTest()
            }
        }
    }
}

@Composable
@Preview
fun XORTest() {
    Box(
        Modifier.background(Color.Blue)
    ) {
        Canvas(modifier = Modifier.fillMaxSize(), onDraw = {
            drawCircle(
                color = Color.Black,
                center = this.center,
                radius = 100f,
                alpha = 0.9f
            ) 

            drawCircle(
                color = Color.Yellow,
                radius = 50f,
                center = this.center,
                blendMode = BlendMode.Xor
            )

            drawCircle(
                color = Color.White,
                radius = 50f,
                center = this.center + Offset(40f, 40f),
                blendMode = BlendMode.Xor
            )
        })
    }
}

This results in preview like this :

However, when I run this preview on my emulator (in both dark/light mode) it results like this:

I don't understand what I am doing wrong here.

I expect the preview & the actual result to be same.

0

There are 0 best solutions below