{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} {% include "_shared/_reference-head-tags.html" %}

CanvasKt

public final class CanvasKt


Summary

Public methods

static final void
@Composable
Canvas(
    @NonNull Modifier modifier,
    @ExtensionFunctionType @NonNull Function1<@NonNull DrawScopeUnit> onDraw
)

Component that allow you to specify an area on the screen and perform canvas drawing on this area.

static final void
@ExperimentalFoundationApi
@Composable
Canvas(
    @NonNull Modifier modifier,
    @NonNull String contentDescription,
    @ExtensionFunctionType @NonNull Function1<@NonNull DrawScopeUnit> onDraw
)

Component that allow you to specify an area on the screen and perform canvas drawing on this area.

Public methods

Canvas

@Composable
public static final void Canvas(
    @NonNull Modifier modifier,
    @ExtensionFunctionType @NonNull Function1<@NonNull DrawScopeUnit> 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 Modifier.size modifier, or relative to parent, via Modifier.fillMaxSize, ColumnScope.weight, etc. If parent wraps this child, only exact sizes must be specified.

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
@NonNull Modifier modifier

mandatory modifier to specify size strategy for this composable

@ExtensionFunctionType @NonNull Function1<@NonNull DrawScopeUnit> 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

Canvas

@ExperimentalFoundationApi
@Composable
public static final void Canvas(
    @NonNull Modifier modifier,
    @NonNull String contentDescription,
    @ExtensionFunctionType @NonNull Function1<@NonNull DrawScopeUnit> 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 Modifier.size modifier, or relative to parent, via Modifier.fillMaxSize, ColumnScope.weight, etc. If parent wraps this child, only exact sizes must be specified.

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
@NonNull Modifier modifier

mandatory modifier to specify size strategy for this composable

@NonNull String 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

@ExtensionFunctionType @NonNull Function1<@NonNull DrawScopeUnit> 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