GraphicsLayer CompositingStrategy Example demonstrating offscreen compositing strategy in Jetpack Compose, leveraging BlendMode.Clear to mask some of the image away.

CompositingStrategyOffscreenExample.kt

/* Copyright 2022 Google LLC.	
   SPDX-License-Identifier: Apache-2.0 */
@Composable
fun GraphicsLayerCompositingStrategyExample() {
   Image(painter = painterResource(id = R.drawable.dog),
      contentDescription = "Dog",
      contentScale = ContentScale.Crop,
      modifier = Modifier
          .size(120.dp)
          .aspectRatio(1f)
          .background(
              Brush.linearGradient(
                  listOf(
                      Color(0xFFC5E1A5),
                      Color(0xFF80DEEA)
                  )
              )
          )
          .padding(8.dp)
          .graphicsLayer {
              compositingStrategy = CompositingStrategy.Offscreen
          }
          .drawWithCache {
              val path = Path()
              path.addOval(
                  Rect(
                      topLeft = Offset.Zero,
                      bottomRight = Offset(size.width, size.height)
                  )
              )
              onDrawWithContent {
                  clipPath(path) {
                      // this draws the actual image - if you don't call drawContent, it wont
                      // render anything
                      [email protected]()
                  }
                  val dotSize = size.width / 8f
                  // Clip a white border for the content
                  drawCircle(
                      Color.Black,
                      radius = dotSize,
                      center = Offset(
                          x = size.width - dotSize,
                          y = size.height - dotSize
                      ),
                      blendMode = BlendMode.Clear
                  )
                  // draw the red circle indication
                  drawCircle(
                      Color(0xFFEF5350), radius = dotSize * 0.8f,
                      center = Offset(
                          x = size.width - dotSize,
                          y = size.height - dotSize
                      )
                  )
              }

          }
   )
}