by @alexstyl
✉️ Leave your feedback

← Back to Foundation

Canvas

Component
in
Foundation
. Since 0.1.0-dev15

Overview

Examples

Community Notes

@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
            )
        }
    }
}

@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)
        )
    }
}
Previous ComponentBox
Next ComponentClickableText