# Canvas

Common/AllAndroid/JVM

## Functions summary

|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/Canvas.composable#Canvas(androidx.compose.ui.Modifier,kotlin.Function1)(modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, onDraw: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/DrawScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)` Component that allow you to specify an area on the screen and perform canvas drawing on this area. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/Canvas.composable#Canvas(androidx.compose.ui.Modifier,kotlin.String,kotlin.Function1)(modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, contentDescription: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html, onDraw: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/DrawScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)` Component that allow you to specify an area on the screen and perform canvas drawing on this area. | Cmn |

## Functions

### Canvas

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/Canvas.kt+function:Canvas) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.0.0)

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

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 `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/size.modifier#(androidx.compose.ui.Modifier).size(androidx.compose.ui.unit.Dp)` modifier, or relative to parent, via `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/fillMaxSize.modifier#(androidx.compose.ui.Modifier).fillMaxSize(kotlin.Float)`, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ColumnScope#(androidx.compose.ui.Modifier).weight(kotlin.Float,kotlin.Boolean)`, etc. If parent wraps this child, only exact sizes must be specified.

```kotlin
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.inset
import androidx.compose.ui.unit.dp

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,
        )
    }
}
```

| Parameters |
|---|---|
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | mandatory modifier to specify size strategy for this composable |
| `onDraw: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/DrawScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | 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 `https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable` function invocation inside it will result to runtime exception |

### Canvas

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/Canvas.kt+function:Canvas) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.0.0)

```
@Composable
fun Canvas(modifier: Modifier, contentDescription: String, onDraw: DrawScope.() -> Unit): Unit
```

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 `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/size.modifier#(androidx.compose.ui.Modifier).size(androidx.compose.ui.unit.Dp)` modifier, or relative to parent, via `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/fillMaxSize.modifier#(androidx.compose.ui.Modifier).fillMaxSize(kotlin.Float)`, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ColumnScope#(androidx.compose.ui.Modifier).weight(kotlin.Float,kotlin.Boolean)`, etc. If parent wraps this child, only exact sizes must be specified.

```kotlin
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

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),
    )
}
```

| Parameters |
|---|---|
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | mandatory modifier to specify size strategy for this composable |
| `contentDescription: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html` | 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: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/DrawScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | 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 `https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable` function invocation inside it will result to runtime exception |