---
# System prepended metadata

title: Query 30

---

Approach 1:
In Jetpack Compose for Android, you can draw offscreen content using the `Modifier.drawWithCache` function. This allows you to render composable content into a bitmap and then use that bitmap wherever you need to display the offscreen content. Here's how you can use `Modifier.drawWithCache` to draw offscreen content:
1. Import the necessary packages:
    ```kotlin
    import android.graphics.Bitmap
    import androidx.compose.runtime.*
    import androidx.compose.ui.graphics.*
    import androidx.compose.ui.graphics.painter.*
    import androidx.compose.ui.unit.*
    import androidx.compose.foundation.layout.*
    import androidx.compose.foundation.background
    import androidx.compose.ui.Modifier
    import androidx.compose.ui.platform.LocalDensity
    ```
2. Create a composable function that you want to render offscreen. For example, let's create a simple offscreen composable that draws a red square:
    ```kotlin
    @Composable
    fun OffscreenComposable() {
        Box(
            modifier = Modifier.fillMaxSize().background(Color.Red)
        )
    }
    ```
3. Define a modifier that uses `Modifier.drawWithCache` to render the offscreen composable into a bitmap:
    ```kotlin
    @Composable
    fun OffscreenContent() {
        val offscreenBitmap by remember { mutableStateOf<Bitmap?>(null) }
        val offscreenModifier = Modifier.drawWithCache {
            val density = LocalDensity.current.density
            val widthPx = (100.dp * density).toInt()
            val heightPx = (100.dp * density).toInt()
            val offscreenSize = IntSize(widthPx, heightPx)
            val painter = rememberUpdatedState(SolidColor(Color.White))
            val offscreenLayer = createLayer(offscreenSize, offscreenModifier, painter)
            onDrawBehind { canvas ->
                if (offscreenBitmap == null) {
                    offscreenBitmap = offscreenLayer.toBitmap()
                }
            }
            // Draw the offscreen content onto the canvas
            offscreenBitmap?.let { bitmap ->
                canvas.drawBitmap(
                    bitmap,
                    src = Rect(0, 0, widthPx, heightPx),
                    dst = Rect(0, 0, widthPx, heightPx)
                )
            }
        }
        Box(
            modifier = Modifier.fillMaxSize() then offscreenModifier
        ) {
            OffscreenComposable()
        }
    }
    ```
In this example, `OffscreenComposable` represents the content you want to render offscreen (a red square). The `OffscreenContent` composable uses `Modifier.drawWithCache` to create an offscreen buffer, renders the `OffscreenComposable` into the offscreen buffer, and then draws the offscreen content onto the canvas.
You can customize the size and appearance of the offscreen content as needed. The key part is to capture the offscreen content as a bitmap and draw it on the canvas using the `drawBitmap` method.
Now, you can use the `OffscreenContent` composable wherever you need the offscreen content in your app.

Approach 2:
 In Jetpack Compose for Android, you can draw offscreen content by using the `Canvas` component and specifying a `Matrix` that translates the canvas's drawing coordinates to the desired offscreen location.

Here's an example of how you can draw a rectangle offscreen:
 ```kotlin
@Composable
fun OffscreenRectangle(
    modifier: Modifier = Modifier,
    color: Color = Color.Red,
    width: Dp = 100.dp,
    height: Dp = 100.dp,
    x: Int = 0,
    y: Int = 0,
) {
    Canvas(
        modifier = modifier,
        onDraw = { canvas ->
            val matrix = Matrix()
            matrix.translate(x.toFloat(), y.toFloat())
            canvas.drawRect(color, width.toFloat(), height.toFloat(), matrix)
        }
    )
}
```
In this example, we define a `OffscreenRectangle` composable that takes an `x` and `y` parameter, which represents the offscreen location where the rectangle should be drawn. We then create a `Canvas` component and override its `onDraw` method to draw a rectangle using the `drawRect` method.

Before drawing the rectangle, we create a `Matrix` object and translate it to the offscreen location using the `translate` method. We then pass this matrix to the `drawRect` method to draw the rectangle at the offscreen location.

You can then use this composable in your layout like this:
 ```kotlin
OffscreenRectangle(
    modifier = Modifier.fillMaxSize(),
    color = Color.Red,
    width = 100.dp,
    height = 100.dp,
    x = 50,
    y = 50,
)
```
This will draw a red rectangle with a size of 100x100 dp at the offscreen location (50, 50).

Note that drawing offscreen content can be expensive, especially if you need to draw a large area or complex graphics. You should only draw offscreen content when it is necessary and optimize your drawing code to minimize the performance impact.