← Compose Multiplatform Component in Compose Foundation
Canvas
Common
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 [Modifier.size] modifier, or relative to parent, via [Modifier.fillMaxSize], [ColumnScope.weight], etc. If parent wraps this child, only exact sizes must be specified.
Last updated:
Installation
dependencies {
implementation("androidx.compose.foundation:foundation:1.7.0-beta04")
}
Overloads
@Composable
fun Canvas(modifier: Modifier, onDraw: DrawScope.() -> Unit)
Parameters
| name | description |
|---|---|
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 |
@Composable
fun Canvas(modifier: Modifier, contentDescription: String, onDraw: DrawScope.() -> Unit)
Parameters
| name | description |
|---|---|
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
CanvasSample
@Composable
@Sampled
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
)
}
}
}
CanvasPieChartSample
@Composable
@Sampled
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)
)
}
}
