---
title: "Canvas"
description: "Component that allow you to specify an area on the screen and perform canvas drawing on this
area. You MUST specify size with modifier, whether with exact sizes via
[androidx.compose.foundation.layout.size] modifier, or relative to parent, via
[androidx.compose.foundation.layout.fillMaxSize], [ColumnScope.weight], etc. If parent wraps this
child, only exact sizes must be specified."
type: "composable"
---

<div class='type'>Composable Function</div>


<a id='references'></a>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
@Composable
fun Canvas(modifier: Modifier, onDraw: DrawScope.() -> Unit) = Spacer(modifier.drawBehind(onDraw))
```


Component that allow you to specify an area on the screen and perform canvas drawing on this
area. You MUST specify size with modifier, whether with exact sizes via
`androidx.compose.foundation.layout.size` modifier, or relative to parent, via
`androidx.compose.foundation.layout.fillMaxSize`, `ColumnScope.weight`, etc. If parent wraps this
child, only exact sizes must be specified.

#### Parameters

| | |
| --- | --- |
| modifier | mandatory modifier to specify size strategy for this composable |
| onDraw | lambda that will be called to perform drawing. Note that this lambda will be called during draw stage, you have no access to composition scope, meaning that `Composable` function invocation inside it will result to runtime exception |




<div class='sourceset sourceset-common'>Common</div>


```kotlin
@Composable
fun Canvas(modifier: Modifier, contentDescription: String, onDraw: DrawScope.() -> Unit) =
    Spacer(modifier.drawBehind(onDraw).semantics { this.contentDescription = contentDescription })
```


Component that allow you to specify an area on the screen and perform canvas drawing on this
area. You MUST specify size with modifier, whether with exact sizes via
`androidx.compose.foundation.layout.size` modifier, or relative to parent, via
`androidx.compose.foundation.layout.fillMaxSize`, `ColumnScope.weight`, etc. If parent wraps this
child, only exact sizes must be specified.

#### Parameters

| | |
| --- | --- |
| modifier | mandatory modifier to specify size strategy for this composable |
| contentDescription | text used by accessibility services to describe what this canvas represents. This should be provided unless the canvas is used for decorative purposes or as part of a larger entity already described in some other way. This text should be localized, such as by using `androidx.compose.ui.res.stringResource` |
| onDraw | lambda that will be called to perform drawing. Note that this lambda will be called during draw stage, you have no access to composition scope, meaning that `Composable` function invocation inside it will result to runtime exception |





## Code Examples
### CanvasPieChartSample
```kotlin
@Composable
fun CanvasPieChartSample() {
    Canvas(
        contentDescription = "Pie chart: 80% apples, 20% bananas (localized string)",
        modifier = Modifier.size(300.dp),
    ) {
        // Apples (80%)
        drawCircle(color = Color.Red, radius = size.width / 2)
        // Bananas (20%)
        drawArc(
            color = Color.Yellow,
            startAngle = 0f,
            sweepAngle = 360f * 0.20f,
            useCenter = true,
            topLeft = Offset(0f, (size.height - size.width) / 2f),
            size = Size(size.width, size.width),
        )
    }
}
```
### CanvasSample
```kotlin
@Composable
fun CanvasSample() {
    Canvas(modifier = Modifier.size(100.dp)) {
        drawRect(Color.Magenta)
        inset(10.0f) {
            drawLine(
                color = Color.Red,
                start = Offset.Zero,
                end = Offset(size.width, size.height),
                strokeWidth = 5.0f,
            )
        }
    }
}
```