DrawScope

Artifact: androidx.compose.ui:ui-graphics

View Source

Added in 1.0.0

Common/All

• Cmn

  @DrawScopeMarker
  interface DrawScope : Density

Known direct subclasses

CanvasDrawScope, ContentDrawScope

CanvasDrawScope	Implementation of DrawScope that issues drawing commands into the specified canvas and bounds via CanvasDrawScope.draw
ContentDrawScope	Receiver scope for drawing content into a layout, where the content can be drawn between other canvas operations.

---

Creates a scoped drawing environment with the provided Canvas. This provides a declarative, stateless API to draw shapes and paths without requiring consumers to maintain underlying Canvas state information. DrawScope implementations are also provided sizing information and transformations are done relative to the local translation. That is left and top coordinates are always the origin and the right and bottom coordinates are always the specified width and height respectively. Drawing content is not clipped, so it is possible to draw outside of the specified bounds.

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.draw
import androidx.compose.ui.graphics.drawscope.inset
import androidx.compose.ui.graphics.drawscope.rotate
import androidx.compose.ui.unit.dp

// Sample showing how to use the DrawScope receiver scope to issue
// drawing commands
Canvas(Modifier.size(120.dp)) {
    drawRect(color = Color.Gray) // Draw grey background
    // Inset content by 10 pixels on the left/right sides and 12 by the
    // top/bottom
    inset(10.0f, 12.0f) {
        val quadrantSize = size / 2.0f

        // Draw a rectangle within the inset bounds
        drawRect(size = quadrantSize, color = Color.Red)

        rotate(45.0f) { drawRect(size = quadrantSize, color = Color.Blue) }
    }
}

Summary

Public companion properties
BlendMode	DefaultBlendMode Default blending mode used for each drawing operation.	Cmn
FilterQuality	DefaultFilterQuality Default FilterQuality used for determining the filtering algorithm to apply when scaling ImageBitmap objects.	Cmn

Public functions
Unit	drawArc(     brush: Brush,     startAngle: Float,     sweepAngle: Float,     useCenter: Boolean,     topLeft: Offset,     size: Size,     alpha: @FloatRange(from = 0.0, to = 1.0) Float,     style: DrawStyle,     colorFilter: ColorFilter?,     blendMode: BlendMode ) Draw an arc scaled to fit inside the given rectangle.	Cmn
Unit	drawArc(     color: Color,     startAngle: Float,     sweepAngle: Float,     useCenter: Boolean,     topLeft: Offset,     size: Size,     alpha: @FloatRange(from = 0.0, to = 1.0) Float,     style: DrawStyle,     colorFilter: ColorFilter?,     blendMode: BlendMode ) Draw an arc scaled to fit inside the given rectangle.	Cmn
Unit	drawCircle(     brush: Brush,     radius: Float,     center: Offset,     alpha: @FloatRange(from = 0.0, to = 1.0) Float,     style: DrawStyle,     colorFilter: ColorFilter?,     blendMode: BlendMode ) Draws a circle at the provided center coordinate and radius.	Cmn
Unit	drawCircle(     color: Color,     radius: Float,     center: Offset,     alpha: @FloatRange(from = 0.0, to = 1.0) Float,     style: DrawStyle,     colorFilter: ColorFilter?,     blendMode: BlendMode ) Draws a circle at the provided center coordinate and radius.	Cmn
Unit	drawImage(     image: ImageBitmap,     topLeft: Offset,     alpha: @FloatRange(from = 0.0, to = 1.0) Float,     style: DrawStyle,     colorFilter: ColorFilter?,     blendMode: BlendMode ) Draws the given ImageBitmap into the canvas with its top-left corner at the given Offset.	Cmn
open Unit	drawImage(     image: ImageBitmap,     srcOffset: IntOffset,     srcSize: IntSize,     dstOffset: IntOffset,     dstSize: IntSize,     alpha: @FloatRange(from = 0.0, to = 1.0) Float,     style: DrawStyle,     colorFilter: ColorFilter?,     blendMode: BlendMode,     filterQuality: FilterQuality ) Draws the subset of the given image described by the src argument into the canvas in the axis-aligned rectangle given by the dst argument.	Cmn
Unit	drawLine(     brush: Brush,     start: Offset,     end: Offset,     strokeWidth: Float,     cap: StrokeCap,     pathEffect: PathEffect?,     alpha: @FloatRange(from = 0.0, to = 1.0) Float,     colorFilter: ColorFilter?,     blendMode: BlendMode ) Draws a line between the given points using the given paint.	Cmn
Unit	drawLine(     color: Color,     start: Offset,     end: Offset,     strokeWidth: Float,     cap: StrokeCap,     pathEffect: PathEffect?,     alpha: @FloatRange(from = 0.0, to = 1.0) Float,     colorFilter: ColorFilter?,     blendMode: BlendMode ) Draws a line between the given points using the given paint.	Cmn
Unit	drawOval(     brush: Brush,     topLeft: Offset,     size: Size,     alpha: @FloatRange(from = 0.0, to = 1.0) Float,     style: DrawStyle,     colorFilter: ColorFilter?,     blendMode: BlendMode ) Draws an oval with the given offset and size.	Cmn
Unit	drawOval(     color: Color,     topLeft: Offset,     size: Size,     alpha: @FloatRange(from = 0.0, to = 1.0) Float,     style: DrawStyle,     colorFilter: ColorFilter?,     blendMode: BlendMode ) Draws an oval with the given offset and size.	Cmn
Unit	drawPath(     path: Path,     brush: Brush,     alpha: @FloatRange(from = 0.0, to = 1.0) Float,     style: DrawStyle,     colorFilter: ColorFilter?,     blendMode: BlendMode ) Draws the given Path with the given Color.	Cmn
Unit	drawPath(     path: Path,     color: Color,     alpha: @FloatRange(from = 0.0, to = 1.0) Float,     style: DrawStyle,     colorFilter: ColorFilter?,     blendMode: BlendMode ) Draws the given Path with the given Color.	Cmn
Unit	drawPoints(     points: List<Offset>,     pointMode: PointMode,     brush: Brush,     strokeWidth: Float,     cap: StrokeCap,     pathEffect: PathEffect?,     alpha: @FloatRange(from = 0.0, to = 1.0) Float,     colorFilter: ColorFilter?,     blendMode: BlendMode ) Draws a sequence of points according to the given PointMode.	Cmn
Unit	drawPoints(     points: List<Offset>,     pointMode: PointMode,     color: Color,     strokeWidth: Float,     cap: StrokeCap,     pathEffect: PathEffect?,     alpha: @FloatRange(from = 0.0, to = 1.0) Float,     colorFilter: ColorFilter?,     blendMode: BlendMode ) Draws a sequence of points according to the given PointMode.	Cmn
Unit	drawRect(     brush: Brush,     topLeft: Offset,     size: Size,     alpha: @FloatRange(from = 0.0, to = 1.0) Float,     style: DrawStyle,     colorFilter: ColorFilter?,     blendMode: BlendMode ) Draws a rectangle with the given offset and size.	Cmn
Unit	drawRect(     color: Color,     topLeft: Offset,     size: Size,     alpha: @FloatRange(from = 0.0, to = 1.0) Float,     style: DrawStyle,     colorFilter: ColorFilter?,     blendMode: BlendMode ) Draws a rectangle with the given offset and size.	Cmn
Unit	drawRoundRect(     brush: Brush,     topLeft: Offset,     size: Size,     cornerRadius: CornerRadius,     alpha: @FloatRange(from = 0.0, to = 1.0) Float,     style: DrawStyle,     colorFilter: ColorFilter?,     blendMode: BlendMode ) Draws a rounded rectangle with the provided size, offset and radii for the x and y axis respectively.	Cmn
Unit	drawRoundRect(     color: Color,     topLeft: Offset,     size: Size,     cornerRadius: CornerRadius,     style: DrawStyle,     alpha: @FloatRange(from = 0.0, to = 1.0) Float,     colorFilter: ColorFilter?,     blendMode: BlendMode ) Draws a rounded rectangle with the given Paint.	Cmn
open Unit	GraphicsLayer.record(size: IntSize, block: DrawScope.() -> Unit) Record the corresponding drawing commands for this GraphicsLayer instance using the Density, LayoutDirection and IntSize from the provided DrawScope as defaults.	Cmn

Public properties
open Offset	center Center of the current bounds of the drawing environment	Cmn
DrawContext	drawContext The current DrawContext that contains the dependencies needed to create the drawing environment	Cmn
LayoutDirection	layoutDirection The layout direction of the layout being drawn in.	Cmn
open Size	size Provides the dimensions of the current drawing environment	Cmn

Extension functions
Unit	DrawScope.drawCircularProgressIndicator(     progress: Float,     colors: ProgressIndicatorColors,     strokeWidth: Dp,     enabled: Boolean,     targetProgress: Float,     allowProgressOverflow: Boolean,     startAngle: Float,     endAngle: Float,     gapSize: Dp ) Draw a simple non-animating circular progress indicator.	android
inline Unit	DrawScope.clipPath(path: Path, clipOp: ClipOp, block: DrawScope.() -> Unit) Reduces the clip region to the intersection of the current clip and the given path.	Cmn
inline Unit	DrawScope.clipRect(     left: Float,     top: Float,     right: Float,     bottom: Float,     clipOp: ClipOp,     block: DrawScope.() -> Unit ) Reduces the clip region to the intersection of the current clip and the given rectangle indicated by the given left, top, right and bottom bounds.	Cmn
inline Unit	DrawScope.draw(     density: Density,     layoutDirection: LayoutDirection,     canvas: Canvas,     size: Size,     graphicsLayer: GraphicsLayer?,     block: DrawScope.() -> Unit ) Draws into the provided Canvas with the commands specified in the lambda with this DrawScope as a receiver	Cmn
inline Unit	DrawScope.drawIntoCanvas(block: (Canvas) -> Unit) Provides access to draw directly with the underlying Canvas.	Cmn
inline Unit	DrawScope.inset(inset: Float, block: DrawScope.() -> Unit) Convenience method modifies the DrawScope bounds to inset both left, top, right and bottom bounds by inset.	Cmn
inline Unit	DrawScope.inset(horizontal: Float, vertical: Float, block: DrawScope.() -> Unit) Convenience method modifies the DrawScope bounds to inset both left and right bounds by horizontal as well as the top and bottom by vertical.	Cmn
inline Unit	DrawScope.inset(     left: Float,     top: Float,     right: Float,     bottom: Float,     block: DrawScope.() -> Unit ) Simultaneously translate the DrawScope coordinate space by left and top as well as modify the dimensions of the current painting area.	Cmn
inline Unit	DrawScope.rotate(degrees: Float, pivot: Offset, block: DrawScope.() -> Unit) Add a rotation (in degrees clockwise) to the current transform at the given pivot point.	Cmn
inline Unit	DrawScope.rotateRad(radians: Float, pivot: Offset, block: DrawScope.() -> Unit) Add a rotation (in radians clockwise) to the current transform at the given pivot point.	Cmn
inline Unit	DrawScope.scale(scale: Float, pivot: Offset, block: DrawScope.() -> Unit) Add an axis-aligned scale to the current transform, scaling both the horizontal direction and the vertical direction at the given pivot coordinate.	Cmn
inline Unit	DrawScope.scale(     scaleX: Float,     scaleY: Float,     pivot: Offset,     block: DrawScope.() -> Unit ) Add an axis-aligned scale to the current transform, scaling by the first argument in the horizontal direction and the second in the vertical direction at the given pivot coordinate.	Cmn
inline Unit	DrawScope.translate(left: Float, top: Float, block: DrawScope.() -> Unit) Translate the coordinate space by the given delta in pixels in both the x and y coordinates respectively	Cmn
inline Unit	DrawScope.withTransform(transformBlock: DrawTransform.() -> Unit, drawBlock: DrawScope.() -> Unit) Perform 1 or more transformations and execute drawing commands with the specified transformations applied.	Cmn
Unit	DrawScope.drawLayer(graphicsLayer: GraphicsLayer) Draw the provided GraphicsLayer into the current DrawScope.	Cmn
Unit	DrawScope.drawOutline(     outline: Outline,     brush: Brush,     alpha: @FloatRange(from = 0.0, to = 1.0) Float,     style: DrawStyle,     colorFilter: ColorFilter?,     blendMode: BlendMode ) Draws the Outline on a DrawScope.	Cmn
Unit	DrawScope.drawOutline(     outline: Outline,     color: Color,     alpha: @FloatRange(from = 0.0, to = 1.0) Float,     style: DrawStyle,     colorFilter: ColorFilter?,     blendMode: BlendMode ) Draws the Outline on a DrawScope.	Cmn
Unit	DrawScope.drawText(     textLayoutResult: TextLayoutResult,     brush: Brush,     topLeft: Offset,     alpha: Float,     shadow: Shadow?,     textDecoration: TextDecoration?,     drawStyle: DrawStyle?,     blendMode: BlendMode ) Draw an existing text layout as produced by TextMeasurer.	Cmn
Unit	DrawScope.drawText(     textLayoutResult: TextLayoutResult,     color: Color,     topLeft: Offset,     alpha: Float,     shadow: Shadow?,     textDecoration: TextDecoration?,     drawStyle: DrawStyle?,     blendMode: BlendMode ) Draw an existing text layout as produced by TextMeasurer.	Cmn
Unit	DrawScope.drawText(     textMeasurer: TextMeasurer,     text: String,     topLeft: Offset,     style: TextStyle,     overflow: TextOverflow,     softWrap: Boolean,     maxLines: Int,     size: Size,     blendMode: BlendMode ) Draw text using a TextMeasurer.	Cmn
Unit	DrawScope.drawText(     textMeasurer: TextMeasurer,     text: AnnotatedString,     topLeft: Offset,     style: TextStyle,     overflow: TextOverflow,     softWrap: Boolean,     maxLines: Int,     placeholders: List<AnnotatedString.Range<Placeholder>>,     size: Size,     blendMode: BlendMode ) Draw styled text using a TextMeasurer.	Cmn

Inherited functions
From androidx.compose.ui.unit.Density open Int Dp.roundToPx() Convert Dp to Int by rounding Cmn open Int TextUnit.roundToPx() Convert Sp to Int by rounding Cmn open Dp Int.toDp() Convert an Int pixel value to Dp. Cmn open Dp Float.toDp() Convert a Float pixel value to a Dp Cmn open DpSize Size.toDpSize() Convert a Size to a DpSize. Cmn open Float Dp.toPx() Convert Dp to pixels. Cmn open Float TextUnit.toPx() Convert Sp to pixels. Cmn open Rect DpRect.toRect() Convert a DpRect to a Rect. Cmn open Size DpSize.toSize() Convert a DpSize to a Size. Cmn open TextUnit Int.toSp() Convert an Int pixel value to Sp. Cmn open TextUnit Float.toSp() Convert a Float pixel value to a Sp Cmn
From androidx.compose.ui.unit.FontScaling open Dp TextUnit.toDp() Convert Sp to Dp. Cmn open TextUnit Dp.toSp() Convert Dp to Sp. Cmn

Inherited properties
From androidx.compose.ui.unit.Density Float density The logical density of the display. Cmn
From androidx.compose.ui.unit.FontScaling Float fontScale Current user preference for the scaling factor for fonts. Cmn

Public companion properties

DefaultBlendMode

Cmn

Added in 1.0.0

val DefaultBlendMode: BlendMode

Default blending mode used for each drawing operation. This ensures that content is drawn on top of the pixels in the destination

DefaultFilterQuality

Cmn

Added in 1.1.0

val DefaultFilterQuality: FilterQuality

Default FilterQuality used for determining the filtering algorithm to apply when scaling ImageBitmap objects. Maps to the default behavior of bilinear filtering

Public functions

drawArc

Cmn

fun drawArc(
    brush: Brush,
    startAngle: Float,
    sweepAngle: Float,
    useCenter: Boolean,
    topLeft: Offset = Offset.Zero,
    size: Size = this.size.offsetSize(topLeft),
    alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f,
    style: DrawStyle = Fill,
    colorFilter: ColorFilter? = null,
    blendMode: BlendMode = DefaultBlendMode
): Unit

Draw an arc scaled to fit inside the given rectangle. It starts from startAngle degrees around the oval up to startAngle + sweepAngle degrees around the oval, with zero degrees being the point on the right hand side of the oval that crosses the horizontal line that intersects the center of the rectangle and with positive angles going clockwise around the oval. If useCenter is true, the arc is closed back to the center, forming a circle sector. Otherwise, the arc is not closed, forming a circle segment.

Parameters
brush: Brush	Color or fill to be applied to the arc
startAngle: Float	Starting angle in degrees. 0 represents 3 o'clock
sweepAngle: Float	Size of the arc in degrees that is drawn clockwise relative to startAngle
useCenter: Boolean	Flag indicating if the arc is to close the center of the bounds
topLeft: Offset = Offset.Zero	Offset from the local origin of 0, 0 relative to the current translation
size: Size = this.size.offsetSize(topLeft)	Dimensions of the arc to draw
alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f	Opacity to be applied to the arc from 0.0f to 1.0f representing fully transparent to fully opaque respectively
style: DrawStyle = Fill	Whether or not the arc is stroked or filled in
colorFilter: ColorFilter? = null	ColorFilter to apply to the brush when drawn into the destination
blendMode: BlendMode = DefaultBlendMode	Blending algorithm to be applied to the arc when it is drawn

drawArc

Cmn

fun drawArc(
    color: Color,
    startAngle: Float,
    sweepAngle: Float,
    useCenter: Boolean,
    topLeft: Offset = Offset.Zero,
    size: Size = this.size.offsetSize(topLeft),
    alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f,
    style: DrawStyle = Fill,
    colorFilter: ColorFilter? = null,
    blendMode: BlendMode = DefaultBlendMode
): Unit

Draw an arc scaled to fit inside the given rectangle. It starts from startAngle degrees around the oval up to startAngle + sweepAngle degrees around the oval, with zero degrees being the point on the right hand side of the oval that crosses the horizontal line that intersects the center of the rectangle and with positive angles going clockwise around the oval. If useCenter is true, the arc is closed back to the center, forming a circle sector. Otherwise, the arc is not closed, forming a circle segment.

Parameters
color: Color	Color to be applied to the arc
startAngle: Float	Starting angle in degrees. 0 represents 3 o'clock
sweepAngle: Float	Size of the arc in degrees that is drawn clockwise relative to startAngle
useCenter: Boolean	Flag indicating if the arc is to close the center of the bounds
topLeft: Offset = Offset.Zero	Offset from the local origin of 0, 0 relative to the current translation
size: Size = this.size.offsetSize(topLeft)	Dimensions of the arc to draw
alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f	Opacity to be applied to the arc from 0.0f to 1.0f representing fully transparent to fully opaque respectively
style: DrawStyle = Fill	Whether or not the arc is stroked or filled in
colorFilter: ColorFilter? = null	ColorFilter to apply to the color when drawn into the destination
blendMode: BlendMode = DefaultBlendMode	Blending algorithm to be applied to the arc when it is drawn

drawCircle

Cmn

fun drawCircle(
    brush: Brush,
    radius: Float = size.minDimension / 2.0f,
    center: Offset = this.center,
    alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f,
    style: DrawStyle = Fill,
    colorFilter: ColorFilter? = null,
    blendMode: BlendMode = DefaultBlendMode
): Unit

Draws a circle at the provided center coordinate and radius. If no center point is provided the center of the bounds is used.

Parameters
brush: Brush	The color or fill to be applied to the circle
radius: Float = size.minDimension / 2.0f	The radius of the circle
center: Offset = this.center	The center coordinate where the circle is to be drawn
alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f	Opacity to be applied to the circle from 0.0f to 1.0f representing fully transparent to fully opaque respectively
style: DrawStyle = Fill	Whether or not the circle is stroked or filled in
colorFilter: ColorFilter? = null	ColorFilter to apply to the brush when drawn into the destination
blendMode: BlendMode = DefaultBlendMode	Blending algorithm to be applied to the brush

drawCircle

Cmn

fun drawCircle(
    color: Color,
    radius: Float = size.minDimension / 2.0f,
    center: Offset = this.center,
    alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f,
    style: DrawStyle = Fill,
    colorFilter: ColorFilter? = null,
    blendMode: BlendMode = DefaultBlendMode
): Unit

Draws a circle at the provided center coordinate and radius. If no center point is provided the center of the bounds is used.

Parameters
color: Color	The color or fill to be applied to the circle
radius: Float = size.minDimension / 2.0f	The radius of the circle
center: Offset = this.center	The center coordinate where the circle is to be drawn
alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f	Opacity to be applied to the circle from 0.0f to 1.0f representing fully transparent to fully opaque respectively
style: DrawStyle = Fill	Whether or not the circle is stroked or filled in
colorFilter: ColorFilter? = null	ColorFilter to apply to the color when drawn into the destination
blendMode: BlendMode = DefaultBlendMode	Blending algorithm to be applied to the brush

drawImage

Cmn

fun drawImage(
    image: ImageBitmap,
    topLeft: Offset = Offset.Zero,
    alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f,
    style: DrawStyle = Fill,
    colorFilter: ColorFilter? = null,
    blendMode: BlendMode = DefaultBlendMode
): Unit

Draws the given ImageBitmap into the canvas with its top-left corner at the given Offset. The image is composited into the canvas using the given Paint.

Parameters
image: ImageBitmap	The ImageBitmap to draw
topLeft: Offset = Offset.Zero	Offset from the local origin of 0, 0 relative to the current translation
alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f	Opacity to be applied to image from 0.0f to 1.0f representing fully transparent to fully opaque respectively
style: DrawStyle = Fill	Specifies whether the image is to be drawn filled in or as a rectangular stroke
colorFilter: ColorFilter? = null	ColorFilter to apply to the image when drawn into the destination
blendMode: BlendMode = DefaultBlendMode	Blending algorithm to apply to destination

drawImage

Cmn

open fun drawImage(
    image: ImageBitmap,
    srcOffset: IntOffset = IntOffset.Zero,
    srcSize: IntSize = IntSize(image.width, image.height),
    dstOffset: IntOffset = IntOffset.Zero,
    dstSize: IntSize = srcSize,
    alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f,
    style: DrawStyle = Fill,
    colorFilter: ColorFilter? = null,
    blendMode: BlendMode = DefaultBlendMode,
    filterQuality: FilterQuality = DefaultFilterQuality
): Unit

Draws the subset of the given image described by the src argument into the canvas in the axis-aligned rectangle given by the dst argument.

If no src rect is provided, the entire image is scaled into the corresponding destination bounds

Parameters
image: ImageBitmap	The source image to draw
srcOffset: IntOffset = IntOffset.Zero	Optional offset representing the top left offset of the source image to draw, this defaults to the origin of image
srcSize: IntSize = IntSize(image.width, image.height)	Optional dimensions of the source image to draw relative to srcOffset, this defaults the width and height of image
dstOffset: IntOffset = IntOffset.Zero	Optional offset representing the top left offset of the destination to draw the given image, this defaults to the origin of the current translation tarting top left offset in the destination to draw the image
dstSize: IntSize = srcSize	Optional dimensions of the destination to draw, this defaults to srcSize
alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f	Opacity to be applied to image from 0.0f to 1.0f representing fully transparent to fully opaque respectively
style: DrawStyle = Fill	Specifies whether the image is to be drawn filled in or as a rectangular stroke
colorFilter: ColorFilter? = null	ColorFilter to apply to the image when drawn into the destination
blendMode: BlendMode = DefaultBlendMode	Blending algorithm to apply to destination
filterQuality: FilterQuality = DefaultFilterQuality	Sampling algorithm applied to the image when it is scaled and drawn into the destination. The default is FilterQuality.Low which scales using a bilinear sampling algorithm

drawLine

Cmn

fun drawLine(
    brush: Brush,
    start: Offset,
    end: Offset,
    strokeWidth: Float = Stroke.HairlineWidth,
    cap: StrokeCap = Stroke.DefaultCap,
    pathEffect: PathEffect? = null,
    alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f,
    colorFilter: ColorFilter? = null,
    blendMode: BlendMode = DefaultBlendMode
): Unit

Draws a line between the given points using the given paint. The line is stroked.

Parameters
brush: Brush	the color or fill to be applied to the line
start: Offset	first point of the line to be drawn
end: Offset	second point of the line to be drawn
strokeWidth: Float = Stroke.HairlineWidth	stroke width to apply to the line
cap: StrokeCap = Stroke.DefaultCap	treatment applied to the ends of the line segment
pathEffect: PathEffect? = null	optional effect or pattern to apply to the line
alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f	opacity to be applied to the brush from 0.0f to 1.0f representing fully transparent to fully opaque respectively
colorFilter: ColorFilter? = null	ColorFilter to apply to the brush when drawn into the destination
blendMode: BlendMode = DefaultBlendMode	the blending algorithm to apply to the brush

drawLine

Cmn

fun drawLine(
    color: Color,
    start: Offset,
    end: Offset,
    strokeWidth: Float = Stroke.HairlineWidth,
    cap: StrokeCap = Stroke.DefaultCap,
    pathEffect: PathEffect? = null,
    alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f,
    colorFilter: ColorFilter? = null,
    blendMode: BlendMode = DefaultBlendMode
): Unit

Draws a line between the given points using the given paint. The line is stroked.

Parameters
color: Color	the color to be applied to the line
start: Offset	first point of the line to be drawn
end: Offset	second point of the line to be drawn
strokeWidth: Float = Stroke.HairlineWidth	The stroke width to apply to the line
cap: StrokeCap = Stroke.DefaultCap	treatment applied to the ends of the line segment
pathEffect: PathEffect? = null	optional effect or pattern to apply to the line
alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f	opacity to be applied to the color from 0.0f to 1.0f representing fully transparent to fully opaque respectively
colorFilter: ColorFilter? = null	ColorFilter to apply to the color when drawn into the destination
blendMode: BlendMode = DefaultBlendMode	the blending algorithm to apply to the color

drawOval

Cmn

fun drawOval(
    brush: Brush,
    topLeft: Offset = Offset.Zero,
    size: Size = this.size.offsetSize(topLeft),
    alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f,
    style: DrawStyle = Fill,
    colorFilter: ColorFilter? = null,
    blendMode: BlendMode = DefaultBlendMode
): Unit

Draws an oval with the given offset and size. If no offset from the top left is provided, it is drawn starting from the origin of the current translation. If no size is provided, the size of the current environment is used.

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.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.draw
import androidx.compose.ui.unit.dp

Canvas(Modifier.size(120.dp)) {
    drawOval(
        brush = Brush.linearGradient(listOf(Color.Red, Color.Blue)),
        topLeft = Offset(10f, 10f),
        size = Size(size.width - 20f, size.height - 20f),
    )
}

Parameters
brush: Brush	Color or fill to be applied to the oval
topLeft: Offset = Offset.Zero	Offset from the local origin of 0, 0 relative to the current translation
size: Size = this.size.offsetSize(topLeft)	Dimensions of the rectangle to draw
alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f	Opacity to be applied to the oval from 0.0f to 1.0f representing fully transparent to fully opaque respectively
style: DrawStyle = Fill	Whether or not the oval is stroked or filled in
colorFilter: ColorFilter? = null	ColorFilter to apply to the brush when drawn into the destination
blendMode: BlendMode = DefaultBlendMode	Blending algorithm to be applied to the brush

drawOval

Cmn

fun drawOval(
    color: Color,
    topLeft: Offset = Offset.Zero,
    size: Size = this.size.offsetSize(topLeft),
    alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f,
    style: DrawStyle = Fill,
    colorFilter: ColorFilter? = null,
    blendMode: BlendMode = DefaultBlendMode
): Unit

Draws an oval with the given offset and size. If no offset from the top left is provided, it is drawn starting from the origin of the current translation. If no size is provided, the size of the current environment is used.

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.graphics.drawscope.draw
import androidx.compose.ui.unit.dp

Canvas(Modifier.size(120.dp)) {
    drawOval(
        color = Color.Cyan,
        topLeft = Offset(10f, 10f),
        size = Size(size.width - 20f, size.height - 20f),
    )
}

Parameters
color: Color	Color to be applied to the oval
topLeft: Offset = Offset.Zero	Offset from the local origin of 0, 0 relative to the current translation
size: Size = this.size.offsetSize(topLeft)	Dimensions of the rectangle to draw
alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f	Opacity to be applied to the oval from 0.0f to 1.0f representing fully transparent to fully opaque respectively
style: DrawStyle = Fill	Whether or not the oval is stroked or filled in
colorFilter: ColorFilter? = null	ColorFilter to apply to the color when drawn into the destination
blendMode: BlendMode = DefaultBlendMode	Blending algorithm to be applied to the brush

drawPath

Cmn

fun drawPath(
    path: Path,
    brush: Brush,
    alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f,
    style: DrawStyle = Fill,
    colorFilter: ColorFilter? = null,
    blendMode: BlendMode = DefaultBlendMode
): Unit

Draws the given Path with the given Color. Whether this shape is filled or stroked (or both) is controlled by DrawStyle. If the path is filled, then subpaths within it are implicitly closed (see Path.close).

Parameters
path: Path	Path to draw
brush: Brush	Brush to be applied to the path
alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f	Opacity to be applied to the path from 0.0f to 1.0f representing fully transparent to fully opaque respectively
style: DrawStyle = Fill	Whether or not the path is stroked or filled in
colorFilter: ColorFilter? = null	ColorFilter to apply to the brush when drawn into the destination
blendMode: BlendMode = DefaultBlendMode	Blending algorithm to be applied to the path when it is drawn

drawPath

Cmn

fun drawPath(
    path: Path,
    color: Color,
    alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f,
    style: DrawStyle = Fill,
    colorFilter: ColorFilter? = null,
    blendMode: BlendMode = DefaultBlendMode
): Unit

Draws the given Path with the given Color. Whether this shape is filled or stroked (or both) is controlled by DrawStyle. If the path is filled, then subpaths within it are implicitly closed (see Path.close).

Parameters
path: Path	Path to draw
color: Color	Color to be applied to the path
alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f	Opacity to be applied to the path from 0.0f to 1.0f representing fully transparent to fully opaque respectively
style: DrawStyle = Fill	Whether or not the path is stroked or filled in
colorFilter: ColorFilter? = null	ColorFilter to apply to the color when drawn into the destination
blendMode: BlendMode = DefaultBlendMode	Blending algorithm to be applied to the path when it is drawn

drawPoints

Cmn

fun drawPoints(
    points: List<Offset>,
    pointMode: PointMode,
    brush: Brush,
    strokeWidth: Float = Stroke.HairlineWidth,
    cap: StrokeCap = StrokeCap.Butt,
    pathEffect: PathEffect? = null,
    alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f,
    colorFilter: ColorFilter? = null,
    blendMode: BlendMode = DefaultBlendMode
): Unit

Draws a sequence of points according to the given PointMode.

The points argument is interpreted as offsets from the origin.

Parameters
points: List<Offset>	List of points to draw with the specified PointMode
pointMode: PointMode	PointMode used to indicate how the points are to be drawn
brush: Brush	Brush to be applied to the points
strokeWidth: Float = Stroke.HairlineWidth	The stroke width to apply to the line
cap: StrokeCap = StrokeCap.Butt	Treatment applied to the ends of the line segment
pathEffect: PathEffect? = null	optional effect or pattern to apply to the points
alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f	Opacity to be applied to the path from 0.0f to 1.0f representing fully transparent to fully opaque respectively.
colorFilter: ColorFilter? = null	ColorFilter to apply to the brush when drawn into the destination
blendMode: BlendMode = DefaultBlendMode	Blending algorithm to be applied to the path when it is drawn

drawPoints

Cmn

fun drawPoints(
    points: List<Offset>,
    pointMode: PointMode,
    color: Color,
    strokeWidth: Float = Stroke.HairlineWidth,
    cap: StrokeCap = StrokeCap.Butt,
    pathEffect: PathEffect? = null,
    alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f,
    colorFilter: ColorFilter? = null,
    blendMode: BlendMode = DefaultBlendMode
): Unit

Draws a sequence of points according to the given PointMode.

The points argument is interpreted as offsets from the origin.

Parameters
points: List<Offset>	List of points to draw with the specified PointMode
pointMode: PointMode	PointMode used to indicate how the points are to be drawn
color: Color	Color to be applied to the points
strokeWidth: Float = Stroke.HairlineWidth	The stroke width to apply to the line
cap: StrokeCap = StrokeCap.Butt	Treatment applied to the ends of the line segment
pathEffect: PathEffect? = null	optional effect or pattern to apply to the point
alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f	Opacity to be applied to the path from 0.0f to 1.0f representing fully transparent to fully opaque respectively
colorFilter: ColorFilter? = null	ColorFilter to apply to the color when drawn into the destination
blendMode: BlendMode = DefaultBlendMode	Blending algorithm to be applied to the path when it is drawn

drawRect

Cmn

fun drawRect(
    brush: Brush,
    topLeft: Offset = Offset.Zero,
    size: Size = this.size.offsetSize(topLeft),
    alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f,
    style: DrawStyle = Fill,
    colorFilter: ColorFilter? = null,
    blendMode: BlendMode = DefaultBlendMode
): Unit

Draws a rectangle with the given offset and size. If no offset from the top left is provided, it is drawn starting from the origin of the current translation. If no size is provided, the size of the current environment is used.

Parameters
brush: Brush	The color or fill to be applied to the rectangle
topLeft: Offset = Offset.Zero	Offset from the local origin of 0, 0 relative to the current translation
size: Size = this.size.offsetSize(topLeft)	Dimensions of the rectangle to draw
alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f	Opacity to be applied to the brush from 0.0f to 1.0f representing fully transparent to fully opaque respectively
style: DrawStyle = Fill	Whether or not the rectangle is stroked or filled in
colorFilter: ColorFilter? = null	ColorFilter to apply to the brush when drawn into the destination
blendMode: BlendMode = DefaultBlendMode	Blending algorithm to apply to destination

drawRect

Cmn

fun drawRect(
    color: Color,
    topLeft: Offset = Offset.Zero,
    size: Size = this.size.offsetSize(topLeft),
    alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f,
    style: DrawStyle = Fill,
    colorFilter: ColorFilter? = null,
    blendMode: BlendMode = DefaultBlendMode
): Unit

Draws a rectangle with the given offset and size. If no offset from the top left is provided, it is drawn starting from the origin of the current translation. If no size is provided, the size of the current environment is used.

Parameters
color: Color	The color to be applied to the rectangle
topLeft: Offset = Offset.Zero	Offset from the local origin of 0, 0 relative to the current translation
size: Size = this.size.offsetSize(topLeft)	Dimensions of the rectangle to draw
alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f	Opacity to be applied to the color from 0.0f to 1.0f representing fully transparent to fully opaque respectively
style: DrawStyle = Fill	Whether or not the rectangle is stroked or filled in
colorFilter: ColorFilter? = null	ColorFilter to apply to the color source pixels
blendMode: BlendMode = DefaultBlendMode	Blending algorithm to apply to destination

drawRoundRect

Cmn

fun drawRoundRect(
    brush: Brush,
    topLeft: Offset = Offset.Zero,
    size: Size = this.size.offsetSize(topLeft),
    cornerRadius: CornerRadius = CornerRadius.Zero,
    alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f,
    style: DrawStyle = Fill,
    colorFilter: ColorFilter? = null,
    blendMode: BlendMode = DefaultBlendMode
): Unit

Draws a rounded rectangle with the provided size, offset and radii for the x and y axis respectively. This rectangle is drawn with the provided Brush parameter and is filled or stroked based on the given DrawStyle

Parameters
brush: Brush	The color or fill to be applied to the rounded rectangle
topLeft: Offset = Offset.Zero	Offset from the local origin of 0, 0 relative to the current translation
size: Size = this.size.offsetSize(topLeft)	Dimensions of the rectangle to draw
cornerRadius: CornerRadius = CornerRadius.Zero	Corner radius of the rounded rectangle, negative radii values are clamped to 0
alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f	Opacity to be applied to rounded rectangle from 0.0f to 1.0f representing fully transparent to fully opaque respectively
style: DrawStyle = Fill	Specifies whether the rounded rectangle is stroked or filled in
colorFilter: ColorFilter? = null	ColorFilter to apply to the brush when drawn into the destination
blendMode: BlendMode = DefaultBlendMode	Blending algorithm to be applied to the brush

drawRoundRect

Cmn

fun drawRoundRect(
    color: Color,
    topLeft: Offset = Offset.Zero,
    size: Size = this.size.offsetSize(topLeft),
    cornerRadius: CornerRadius = CornerRadius.Zero,
    style: DrawStyle = Fill,
    alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f,
    colorFilter: ColorFilter? = null,
    blendMode: BlendMode = DefaultBlendMode
): Unit

Draws a rounded rectangle with the given Paint. Whether the rectangle is filled or stroked (or both) is controlled by Paint.style.

Parameters
color: Color	The color to be applied to the rounded rectangle
topLeft: Offset = Offset.Zero	Offset from the local origin of 0, 0 relative to the current translation
size: Size = this.size.offsetSize(topLeft)	Dimensions of the rectangle to draw
cornerRadius: CornerRadius = CornerRadius.Zero	Corner radius of the rounded rectangle, negative radii values are clamped to 0
style: DrawStyle = Fill	Specifies whether the rounded rectangle is stroked or filled in
alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f	Opacity to be applied to rounded rectangle from 0.0f to 1.0f representing fully transparent to fully opaque respectively
colorFilter: ColorFilter? = null	ColorFilter to apply to the color when drawn into the destination
blendMode: BlendMode = DefaultBlendMode	Blending algorithm to be applied to the color

record

Cmn

Artifact: androidx.compose.ui:ui-graphics

View Source

open fun GraphicsLayer.record(
    size: IntSize = [e-mail](),
    block: DrawScope.() -> Unit
): Unit

Record the corresponding drawing commands for this GraphicsLayer instance using the Density, LayoutDirection and IntSize from the provided DrawScope as defaults. This will retarget the underlying canvas of the provided DrawScope to draw within the layer itself and reset it to the original canvas on the conclusion of this method call.

Public properties

center

Cmn

Added in 1.0.0

open val center: Offset

Center of the current bounds of the drawing environment

drawContext

Cmn

Added in 1.0.0

val drawContext: DrawContext

The current DrawContext that contains the dependencies needed to create the drawing environment

layoutDirection

Cmn

Added in 1.0.0

val layoutDirection: LayoutDirection

The layout direction of the layout being drawn in.

size

Cmn

Added in 1.0.0

open val size: Size

Provides the dimensions of the current drawing environment

Extension functions

drawCircularProgressIndicator

android

Artifact: androidx.wear.compose:compose-material3

View Source

fun DrawScope.drawCircularProgressIndicator(
    progress: Float,
    colors: ProgressIndicatorColors,
    strokeWidth: Dp,
    enabled: Boolean = true,
    targetProgress: Float = progress,
    allowProgressOverflow: Boolean = false,
    startAngle: Float = CircularProgressIndicatorDefaults.StartAngle,
    endAngle: Float = startAngle,
    gapSize: Dp = CircularProgressIndicatorDefaults.calculateRecommendedGapSize(strokeWidth)
): Unit

Draw a simple non-animating circular progress indicator. Prefer to use CircularProgressIndicator directly instead of this method in order to access the recommended animations, but this method can be used when custom animations are required.

Example of a circular progress indicator with custom progress animation:

import androidx.compose.animation.core.Animatable
import androidx.compose.animation.core.LinearEasing
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableFloatStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.snapshotFlow
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.CircularProgressIndicator
import androidx.wear.compose.material3.CircularProgressIndicatorDefaults
import androidx.wear.compose.material3.MaterialTheme
import androidx.wear.compose.material3.ProgressIndicatorDefaults
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.drawCircularProgressIndicator

val progress = remember { mutableFloatStateOf(0f) }
val animatedProgress = remember { Animatable(0f) }
val colors =
    ProgressIndicatorDefaults.colors(indicatorColor = Color.Green, trackColor = Color.White)

LaunchedEffect(Unit) {
    snapshotFlow(progress::value).collectLatest {
        animatedProgress.animateTo(it, tween(durationMillis = 1024, easing = LinearEasing))
    }
}

Box(
    modifier =
        Modifier.background(MaterialTheme.colorScheme.background)
            .padding(CircularProgressIndicatorDefaults.FullScreenPadding)
            .fillMaxSize()
) {
    Button(
        modifier = Modifier.align(Alignment.Center).padding(12.dp),
        onClick = { progress.value = if (progress.value == 0f) 1f else 0f },
        label = { Text("Animate") },
    )

    // Draw the circular progress indicator with custom animation
    Spacer(
        Modifier.fillMaxSize().focusable().drawBehind {
            drawCircularProgressIndicator(
                progress = animatedProgress.value,
                targetProgress = animatedProgress.targetValue,
                strokeWidth = 10.dp,
                colors = colors,
                startAngle = 120f,
                endAngle = 60f,
            )
        }
    )
}

Parameters
progress: Float	The progress of this progress indicator where 0.0 represents no progress and 1.0 represents completion.
colors: ProgressIndicatorColors	ProgressIndicatorColors that will be used to resolve the indicator and track color for this progress indicator in different states.
strokeWidth: Dp	The stroke width for the progress indicator. The recommended values are CircularProgressIndicatorDefaults.largeStrokeWidth and CircularProgressIndicatorDefaults.smallStrokeWidth.
enabled: Boolean = true	controls the enabled state. Although this component is not clickable, it can be contained within a clickable component. When enabled is false, this component will appear visually disabled.
targetProgress: Float = progress	Target value if the progress value is to be animated. Used to determine if small progress values should be capped to a minimum of stroke width. For a static progress indicator this should be equal to progress.
allowProgressOverflow: Boolean = false	When progress overflow is allowed, values smaller than 0.0 will be coerced to 0, while values larger than 1.0 will be wrapped around and shown as overflow with a different track color ProgressIndicatorColors.overflowTrackBrush. For example values 1.2, 2.2 etc will be shown as 20% progress with the overflow color. When progress overflow is not allowed, progress values will be coerced into the range 0..1.
startAngle: Float = CircularProgressIndicatorDefaults.StartAngle	The starting position of the progress arc, measured clockwise in degrees (0 to 360) from the 3 o'clock position. For example, 0 and 360 represent 3 o'clock, 90 and 180 represent 6 o'clock and 9 o'clock respectively. Default is 270 degrees CircularProgressIndicatorDefaults.StartAngle (top of the screen).
endAngle: Float = startAngle	The ending position of the progress arc, measured clockwise in degrees (0 to 360) from the 3 o'clock position. For example, 0 and 360 represent 3 o'clock, 90 and 180 represent 6 o'clock and 9 o'clock respectively. By default equal to startAngle.
gapSize: Dp = CircularProgressIndicatorDefaults.calculateRecommendedGapSize(strokeWidth)	The size (in Dp) of the gap between the ends of the progress indicator and the track. The stroke endcaps are not included in this distance.

clipPath

Cmn

Artifact: androidx.compose.ui:ui-graphics

View Source

inline fun DrawScope.clipPath(
    path: Path,
    clipOp: ClipOp = ClipOp.Intersect,
    block: DrawScope.() -> Unit
): Unit

Reduces the clip region to the intersection of the current clip and the given path. This method provides a callback to issue drawing commands within the region defined by the clipped path. After this method is invoked, this clip is no longer applied.

Parameters
path: Path	Shape to clip drawing content within
clipOp: ClipOp = ClipOp.Intersect	Clipping operation to conduct on the given bounds, defaults to ClipOp.Intersect
block: DrawScope.() -> Unit	Lambda callback with this CanvasScope as a receiver scope to issue drawing commands within the provided clip

clipRect

Cmn

Artifact: androidx.compose.ui:ui-graphics

View Source

inline fun DrawScope.clipRect(
    left: Float = 0.0f,
    top: Float = 0.0f,
    right: Float = size.width,
    bottom: Float = size.height,
    clipOp: ClipOp = ClipOp.Intersect,
    block: DrawScope.() -> Unit
): Unit

Reduces the clip region to the intersection of the current clip and the given rectangle indicated by the given left, top, right and bottom bounds. This provides a callback to issue drawing commands within the clipped region. After this method is invoked, this clip is no longer applied.

Use ClipOp.Difference to subtract the provided rectangle from the current clip.

Parameters
left: Float = 0.0f	Left bound of the rectangle to clip
top: Float = 0.0f	Top bound of the rectangle to clip
right: Float = size.width	Right bound of the rectangle to clip
bottom: Float = size.height	Bottom bound of the rectangle to clip
clipOp: ClipOp = ClipOp.Intersect	Clipping operation to conduct on the given bounds, defaults to ClipOp.Intersect
block: DrawScope.() -> Unit	Lambda callback with this CanvasScope as a receiver scope to issue drawing commands within the provided clip

draw

Cmn

Artifact: androidx.compose.ui:ui-graphics

View Source

inline fun DrawScope.draw(
    density: Density,
    layoutDirection: LayoutDirection,
    canvas: Canvas,
    size: Size,
    graphicsLayer: GraphicsLayer? = null,
    block: DrawScope.() -> Unit
): Unit

Draws into the provided Canvas with the commands specified in the lambda with this DrawScope as a receiver

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawWithCache
import androidx.compose.ui.graphics.drawscope.draw
import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
import androidx.compose.ui.graphics.nativeCanvas
import androidx.compose.ui.unit.dp

Box(
    modifier =
        Modifier.size(120.dp).drawWithCache {
            // Example that shows how to redirect rendering to an Android Picture and then
            // draw the picture into the original destination
            // Note:
            // Canvas#drawPicture is supported with hardware acceleration on Android API 23+
            // Check
            // https://developer.android.com/topic/performance/hardware-accel#drawing-support
            // for details of which drawing operations are supported with hardware acceleration
            val picture = android.graphics.Picture()
            val width = this.size.width.toInt()
            val height = this.size.height.toInt()
            onDrawWithContent {
                val pictureCanvas =
                    androidx.compose.ui.graphics.Canvas(picture.beginRecording(width, height))
                draw(this, this.layoutDirection, pictureCanvas, this.size) {
                    [e-mail]()
                }
                picture.endRecording()

                drawIntoCanvas { canvas -> canvas.nativeCanvas.drawPicture(picture) }
            }
        }
)

Parameters
density: Density	Density used to assist in conversions of density independent pixels to raw pixels to draw
layoutDirection: LayoutDirection	LayoutDirection of the layout being drawn in.
canvas: Canvas	target canvas to render into
size: Size	bounds relative to the current canvas translation in which the DrawScope should draw within
graphicsLayer: GraphicsLayer? = null	Current GraphicsLayer we are drawing into. Might be null if the canvas is not provided by a GraphicsLayer, for example in the case of a software-accelerated drawing
block: DrawScope.() -> Unit	lambda that is called to issue drawing commands on this DrawScope

drawIntoCanvas

Cmn

Artifact: androidx.compose.ui:ui-graphics

View Source

inline fun DrawScope.drawIntoCanvas(block: (Canvas) -> Unit): Unit

Provides access to draw directly with the underlying Canvas. This is helpful for situations to re-use alternative drawing logic in combination with DrawScope

Parameters
block: (Canvas) -> Unit	Lambda callback to issue drawing commands on the provided Canvas

inset

Cmn

Artifact: androidx.compose.ui:ui-graphics

View Source

inline fun DrawScope.inset(inset: Float, block: DrawScope.() -> Unit): Unit

Convenience method modifies the DrawScope bounds to inset both left, top, right and bottom bounds by inset. After this method is invoked, the coordinate space is returned to the state before this inset was applied.

Parameters
inset: Float	number of pixels to inset left, top, right, and bottom bounds.
block: DrawScope.() -> Unit	lambda that is called to issue additional drawing commands within the modified coordinate space

inset

Cmn

Artifact: androidx.compose.ui:ui-graphics

View Source

inline fun DrawScope.inset(
    horizontal: Float = 0.0f,
    vertical: Float = 0.0f,
    block: DrawScope.() -> Unit
): Unit

Convenience method modifies the DrawScope bounds to inset both left and right bounds by horizontal as well as the top and bottom by vertical. After this method is invoked, the coordinate space is returned to the state before this inset was applied.

Parameters
horizontal: Float = 0.0f	number of pixels to inset both left and right bounds. Zero by default
vertical: Float = 0.0f	Optional number of pixels to inset both top and bottom bounds. Zero by default
block: DrawScope.() -> Unit	lambda that is called to issue additional drawing commands within the modified coordinate space

inset

Cmn

Artifact: androidx.compose.ui:ui-graphics

View Source

inline fun DrawScope.inset(
    left: Float,
    top: Float,
    right: Float,
    bottom: Float,
    block: DrawScope.() -> Unit
): Unit

Simultaneously translate the DrawScope coordinate space by left and top as well as modify the dimensions of the current painting area. This provides a callback to issue more drawing instructions within the modified coordinate space. This method modifies the width of the DrawScope to be equivalent to width - (left + right) as well as height to height - (top + bottom). After this method is invoked, the coordinate space is returned to the state before the inset was applied.

Parameters
left: Float	number of pixels to inset the left drawing bound
top: Float	number of pixels to inset the top drawing bound
right: Float	number of pixels to inset the right drawing bound
bottom: Float	number of pixels to inset the bottom drawing bound
block: DrawScope.() -> Unit	lambda that is called to issue drawing commands within the inset coordinate space

rotate

Cmn

Artifact: androidx.compose.ui:ui-graphics

View Source

inline fun DrawScope.rotate(degrees: Float, pivot: Offset = center, block: DrawScope.() -> Unit): Unit

Add a rotation (in degrees clockwise) to the current transform at the given pivot point. The pivot coordinate remains unchanged by the rotation transformation. After the provided lambda is invoked, the rotation transformation is undone.

Parameters
degrees: Float	to rotate clockwise
pivot: Offset = center	The coordinate for the pivot point, defaults to the center of the coordinate space
block: DrawScope.() -> Unit	lambda that is called to issue drawing commands within the rotated coordinate space

rotateRad

Cmn

Artifact: androidx.compose.ui:ui-graphics

View Source

inline fun DrawScope.rotateRad(radians: Float, pivot: Offset = center, block: DrawScope.() -> Unit): Unit

Add a rotation (in radians clockwise) to the current transform at the given pivot point. The pivot coordinate remains unchanged by the rotation transformation

Parameters
radians: Float	to rotate clockwise
pivot: Offset = center	The coordinate for the pivot point, defaults to the center of the coordinate space
block: DrawScope.() -> Unit	lambda that is called to issue drawing commands within the rotated coordinate space

scale

Cmn

Artifact: androidx.compose.ui:ui-graphics

View Source

inline fun DrawScope.scale(scale: Float, pivot: Offset = center, block: DrawScope.() -> Unit): Unit

Add an axis-aligned scale to the current transform, scaling both the horizontal direction and the vertical direction at the given pivot coordinate. The pivot coordinate remains unchanged by the scale transformation. After this method is invoked, the coordinate space is returned to the state before the scale was applied.

Parameters
scale: Float	The amount to scale uniformly in both directions
pivot: Offset = center	The coordinate for the pivot point, defaults to the center of the coordinate space
block: DrawScope.() -> Unit	lambda used to issue drawing commands within the scaled coordinate space

scale

Cmn

Artifact: androidx.compose.ui:ui-graphics

View Source

inline fun DrawScope.scale(
    scaleX: Float,
    scaleY: Float,
    pivot: Offset = center,
    block: DrawScope.() -> Unit
): Unit

Add an axis-aligned scale to the current transform, scaling by the first argument in the horizontal direction and the second in the vertical direction at the given pivot coordinate. The pivot coordinate remains unchanged by the scale transformation. After this method is invoked, the coordinate space is returned to the state before the scale was applied.

Parameters
scaleX: Float	The amount to scale in X
scaleY: Float	The amount to scale in Y
pivot: Offset = center	The coordinate for the pivot point, defaults to the center of the coordinate space
block: DrawScope.() -> Unit	lambda used to issue drawing commands within the scaled coordinate space

translate

Cmn

Artifact: androidx.compose.ui:ui-graphics

View Source

inline fun DrawScope.translate(left: Float = 0.0f, top: Float = 0.0f, block: DrawScope.() -> Unit): Unit

Translate the coordinate space by the given delta in pixels in both the x and y coordinates respectively

Parameters
left: Float = 0.0f	Pixels to translate the coordinate space in the x-axis
top: Float = 0.0f	Pixels to translate the coordinate space in the y-axis
block: DrawScope.() -> Unit	lambda that is called to issue drawing commands within the translated coordinate space

withTransform

Cmn

Artifact: androidx.compose.ui:ui-graphics

View Source

inline fun DrawScope.withTransform(transformBlock: DrawTransform.() -> Unit, drawBlock: DrawScope.() -> Unit): Unit

Perform 1 or more transformations and execute drawing commands with the specified transformations applied. After this call is complete, the transformation before this call was made is restored

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.draw
import androidx.compose.ui.graphics.drawscope.inset
import androidx.compose.ui.graphics.drawscope.rotate
import androidx.compose.ui.graphics.drawscope.withTransform
import androidx.compose.ui.unit.dp

Canvas(Modifier.size(120.dp)) { // CanvasScope
    inset(20.0f) {
        // Use withTransform to batch multiple transformations for 1 or more drawing calls
        // that are to be drawn.
        // This is more efficient than issuing nested translation, rotation and scaling
        // calls as the internal state is saved once before and after instead of multiple
        // times between each transformation if done individually
        withTransform({
            translate(10.0f, 12.0f)
            rotate(45.0f, center)
            scale(2.0f, 0.5f)
        }) {
            drawRect(Color.Cyan)
            drawCircle(Color.Blue)
        }
        drawRect(Color.Red, alpha = 0.25f)
    }
}

Parameters
transformBlock: DrawTransform.() -> Unit	Callback invoked to issue transformations to be made before the drawing operations are issued
drawBlock: DrawScope.() -> Unit	Callback invoked to issue drawing operations after the transformations are applied

drawLayer

Cmn

Artifact: androidx.compose.ui:ui-graphics

View Source

fun DrawScope.drawLayer(graphicsLayer: GraphicsLayer): Unit

Draw the provided GraphicsLayer into the current DrawScope. The GraphicsLayer provided must have GraphicsLayer.record invoked on it otherwise no visual output will be seen in the rendered result.

import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.DrawScope
import androidx.compose.ui.graphics.layer.drawLayer
import androidx.compose.ui.unit.IntOffset

// Build the layer with the density, layout direction and size from the DrawScope
// and position the top left to be 20 pixels from the left and 30 pixels from the top.
// This will the bounds of the layer with a red rectangle
layer.apply {
    record { drawRect(Color.Red) }
    this.topLeft = IntOffset(20, 30)
}

// Draw the layer into the provided DrawScope
drawLayer(layer)

import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.DrawScope
import androidx.compose.ui.graphics.layer.drawLayer
import androidx.compose.ui.unit.IntSize

// Create a 200 x 200 pixel layer that has a red rectangle drawn in the lower right
// corner.
layer.apply {
    record(size = IntSize(200, 200)) {
        drawRect(Color.Red, topLeft = Offset(size.width / 2f, size.height / 2f))
    }
    // Scale the layer by 1.5x in both the x and y axis relative to the bottom
    // right corner
    scaleX = 1.5f
    scaleY = 1.5f
    pivotOffset = Offset(this.size.width.toFloat(), this.size.height.toFloat())
}

// Draw the layer into the provided DrawScope
drawLayer(layer)

import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.drawscope.DrawScope
import androidx.compose.ui.graphics.layer.drawLayer

// Create a layer with the same configuration as the destination DrawScope
// and draw a red rectangle in the layer
layer.apply {
    record { drawRect(Color.Red) }
    // Apply a ColorFilter that will tint the contents of the layer to blue
    // when it is drawn into the destination DrawScope
    colorFilter = ColorFilter.tint(Color.Blue)
}

drawLayer(layer)

import androidx.compose.ui.graphics.BlurEffect
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.TileMode
import androidx.compose.ui.graphics.drawscope.DrawScope
import androidx.compose.ui.graphics.drawscope.inset
import androidx.compose.ui.graphics.layer.drawLayer

// Create a layer sized to the destination draw scope that is comprised
// of an inset red rectangle
layer.apply {
    record { inset(20f, 20f) { drawRect(Color.Red) } }
    // Configure a blur to the contents of the layer that is applied
    // when drawn to the destination DrawScope
    renderEffect = BlurEffect(20f, 20f, TileMode.Decal)
}

drawLayer(layer)

import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.inset
import androidx.compose.ui.graphics.layer.drawLayer

// Create a layer sized to the destination draw scope that is comprised
// of an inset red rectangle
layer.apply {
    record { inset(20f, 20f) { drawRect(Color.Red) } }
    // Renders the content of the layer with 50% alpha when it is drawn
    // into the destination
    alpha = 0.5f
}

drawLayer(layer)

import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.layer.drawLayer

layer.apply {
    record { drawRect(Color.Yellow) }
    // Rotates the yellow rect 45f clockwise relative to the x axis
    rotationX = 45f
}

drawLayer(layer)

import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.layer.drawLayer

layer.apply {
    record { drawRect(Color.Yellow) }
    // Rotates the yellow rect 45f clockwise relative to the y axis
    rotationY = 45f
    cameraDistance = 5.0f
}

drawLayer(layer)

drawOutline

Cmn

Artifact: androidx.compose.ui:ui-graphics

View Source

fun DrawScope.drawOutline(
    outline: Outline,
    brush: Brush,
    alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f,
    style: DrawStyle = Fill,
    colorFilter: ColorFilter? = null,
    blendMode: BlendMode = DrawScope.DefaultBlendMode
): Unit

Draws the Outline on a DrawScope.

Parameters
outline: Outline	the outline to draw.
brush: Brush	Brush applied to the outline when it is drawn
alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f	Opacity to be applied to outline from 0.0f to 1.0f representing fully transparent to fully opaque respectively
style: DrawStyle = Fill	Specifies whether the outline is stroked or filled in
colorFilter: ColorFilter? = null	: ColorFilter to apply to the Brush when drawn into the destination
blendMode: BlendMode = DrawScope.DefaultBlendMode	: Blending algorithm to be applied to the outline

drawOutline

Cmn

Artifact: androidx.compose.ui:ui-graphics

View Source

fun DrawScope.drawOutline(
    outline: Outline,
    color: Color,
    alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f,
    style: DrawStyle = Fill,
    colorFilter: ColorFilter? = null,
    blendMode: BlendMode = DrawScope.DefaultBlendMode
): Unit

Draws the Outline on a DrawScope.

Parameters
outline: Outline	the outline to draw.
color: Color	Color applied to the outline when it is drawn
alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f	Opacity to be applied to outline from 0.0f to 1.0f representing fully transparent to fully opaque respectively
style: DrawStyle = Fill	Specifies whether the outline is stroked or filled in
colorFilter: ColorFilter? = null	: ColorFilter to apply to the color when drawn into the destination
blendMode: BlendMode = DrawScope.DefaultBlendMode	: Blending algorithm to be applied to the outline

drawText

Cmn

Artifact: androidx.compose.ui:ui-text

View Source

fun DrawScope.drawText(
    textLayoutResult: TextLayoutResult,
    brush: Brush,
    topLeft: Offset = Offset.Zero,
    alpha: Float = Float.NaN,
    shadow: Shadow? = null,
    textDecoration: TextDecoration? = null,
    drawStyle: DrawStyle? = null,
    blendMode: BlendMode = DrawScope.DefaultBlendMode
): Unit

Draw an existing text layout as produced by TextMeasurer.

This draw function cannot relayout when async font loading resolves. If using async fonts or other dynamic text layout, you are responsible for invalidating layout on changes.

Parameters
textLayoutResult: TextLayoutResult	Text Layout to be drawn
brush: Brush	The brush to use when drawing the text.
topLeft: Offset = Offset.Zero	Offsets the text from top left point of the current coordinate system.
alpha: Float = Float.NaN	Opacity to be applied to brush from 0.0f to 1.0f representing fully transparent to fully opaque respectively.
shadow: Shadow? = null	The shadow effect applied on the text.
textDecoration: TextDecoration? = null	The decorations to paint on the text (e.g., an underline).
drawStyle: DrawStyle? = null	Whether or not the text is stroked or filled in.
blendMode: BlendMode = DrawScope.DefaultBlendMode	Blending algorithm to be applied to the text

drawText

Cmn

Artifact: androidx.compose.ui:ui-text

View Source

fun DrawScope.drawText(
    textLayoutResult: TextLayoutResult,
    color: Color = Color.Unspecified,
    topLeft: Offset = Offset.Zero,
    alpha: Float = Float.NaN,
    shadow: Shadow? = null,
    textDecoration: TextDecoration? = null,
    drawStyle: DrawStyle? = null,
    blendMode: BlendMode = DrawScope.DefaultBlendMode
): Unit

Draw an existing text layout as produced by TextMeasurer.

This draw function cannot relayout when async font loading resolves. If using async fonts or other dynamic text layout, you are responsible for invalidating layout on changes.

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.Layout
import androidx.compose.ui.layout.layout
import androidx.compose.ui.text.TextLayoutResult
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.drawText
import androidx.compose.ui.text.rememberTextMeasurer
import androidx.compose.ui.unit.sp

val textMeasurer = rememberTextMeasurer()
var textLayoutResult by remember { mutableStateOf<TextLayoutResult?>(null) }

Canvas(
    Modifier.fillMaxSize().layout { measurable, constraints ->
        val placeable = measurable.measure(constraints)
        // TextLayout can be done any time prior to its use in draw, including in a
        // background thread.
        // In this sample, text layout is measured in layout modifier. This way the layout
        // call can be restarted when async font loading completes due to the fact that
        // `.measure` call is executed in `.layout`.
        textLayoutResult =
            textMeasurer.measure(text = "Hello, World!", style = TextStyle(fontSize = 24.sp))
        layout(placeable.width, placeable.height) { placeable.placeRelative(0, 0) }
    }
) {
    // This happens during draw phase.
    textLayoutResult?.let { drawText(it) }
}

import androidx.compose.animation.animateColor
import androidx.compose.animation.core.infiniteRepeatable
import androidx.compose.animation.core.rememberInfiniteTransition
import androidx.compose.animation.core.tween
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.LocalTextStyle
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawWithCache
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.Layout
import androidx.compose.ui.layout.layout
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.drawText
import androidx.compose.ui.text.rememberTextMeasurer
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.Constraints

// We can disable implicit caching since we will cache in DrawWithCache
val textMeasurer = rememberTextMeasurer(cacheSize = 0)
// Apply the current text style from theme, otherwise TextStyle.Default will be used.
val materialTextStyle = LocalTextStyle.current

// Animate color repeatedly
val infiniteTransition = rememberInfiniteTransition()
val color by
    infiniteTransition.animateColor(
        initialValue = Color.Red,
        targetValue = Color.Blue,
        animationSpec = infiniteRepeatable(tween(1000)),
    )

Box(
    Modifier.fillMaxSize().drawWithCache {
        // Text layout will be measured just once until the size of the drawing area or
        // materialTextStyle changes.
        val textLayoutResult =
            textMeasurer.measure(
                text = "Hello, World!",
                style = materialTextStyle,
                constraints =
                    Constraints.fixed(
                        width = (size.width / 2).roundToInt(),
                        height = (size.height / 2).roundToInt(),
                    ),
                overflow = TextOverflow.Ellipsis,
            )
        // color changes will only invalidate draw phase
        onDrawWithContent {
            drawContent()
            drawText(
                textLayoutResult,
                color = color,
                topLeft =
                    Offset(
                        (size.width - textLayoutResult.size.width) / 2,
                        (size.height - textLayoutResult.size.height) / 2,
                    ),
            )
        }
    }
)

Parameters
textLayoutResult: TextLayoutResult	Text Layout to be drawn
color: Color = Color.Unspecified	Text color to use
topLeft: Offset = Offset.Zero	Offsets the text from top left point of the current coordinate system.
alpha: Float = Float.NaN	opacity to be applied to the color from 0.0f to 1.0f representing fully transparent to fully opaque respectively
shadow: Shadow? = null	The shadow effect applied on the text.
textDecoration: TextDecoration? = null	The decorations to paint on the text (e.g., an underline).
drawStyle: DrawStyle? = null	Whether or not the text is stroked or filled in.
blendMode: BlendMode = DrawScope.DefaultBlendMode	Blending algorithm to be applied to the text

drawText

Cmn

Artifact: androidx.compose.ui:ui-text

View Source

fun DrawScope.drawText(
    textMeasurer: TextMeasurer,
    text: String,
    topLeft: Offset = Offset.Zero,
    style: TextStyle = TextStyle.Default,
    overflow: TextOverflow = TextOverflow.Clip,
    softWrap: Boolean = true,
    maxLines: Int = Int.MAX_VALUE,
    size: Size = Size.Unspecified,
    blendMode: BlendMode = DrawScope.DefaultBlendMode
): Unit

Draw text using a TextMeasurer.

This draw function supports only one text style, and async font loading.

TextMeasurer carries an internal cache to optimize text layout measurement for repeated calls in draw phase. If layout affecting attributes like font size, font weight, overflow, softWrap, etc. are changed in consecutive calls to this method, TextMeasurer and its internal cache that holds layout results may not offer any benefits. Check out TextMeasurer and drawText overloads that take TextLayoutResult to learn more about text layout and draw phase optimizations.

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.drawText
import androidx.compose.ui.text.rememberTextMeasurer

val textMeasurer = rememberTextMeasurer()

Canvas(Modifier.fillMaxSize()) { drawText(textMeasurer, "Hello, World!") }

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.drawText
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.rememberTextMeasurer
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.unit.sp

val textMeasurer = rememberTextMeasurer()

Canvas(Modifier.fillMaxSize()) {
    drawText(
        textMeasurer = textMeasurer,
        text = "Hello, World!",
        style =
            TextStyle(
                fontSize = 24.sp,
                fontWeight = FontWeight.Bold,
                textDecoration = TextDecoration.Underline,
            ),
    )
}

Parameters
textMeasurer: TextMeasurer	Measures and lays out the text
text: String	Text to be drawn
topLeft: Offset = Offset.Zero	Offsets the text from top left point of the current coordinate system.
style: TextStyle = TextStyle.Default	the TextStyle to be applied to the text
overflow: TextOverflow = TextOverflow.Clip	How visual overflow should be handled.
softWrap: Boolean = true	Whether the text should break at soft line breaks. If false, the glyphs in the text will be positioned as if there was unlimited horizontal space. If softWrap is false, overflow and TextAlign may have unexpected effects.
maxLines: Int = Int.MAX_VALUE	An optional maximum number of lines for the text to span, wrapping if necessary. If the text exceeds the given number of lines, it will be truncated according to overflow and softWrap. If it is not null, then it must be greater than zero.
size: Size = Size.Unspecified	how wide and tall the text should be. If left Size.Unspecified as its default value, text will be forced to fit inside the total drawing area from where it's placed. If size is specified, Size.width will define the width of the text. Size.height helps defining the number of lines that fit if softWrap is enabled and overflow is TextOverflow.Ellipsis. Otherwise, Size.height either defines where the text is clipped (TextOverflow.Clip) or becomes no-op.
blendMode: BlendMode = DrawScope.DefaultBlendMode	Blending algorithm to be applied to the text

drawText

Cmn

Artifact: androidx.compose.ui:ui-text

View Source

fun DrawScope.drawText(
    textMeasurer: TextMeasurer,
    text: AnnotatedString,
    topLeft: Offset = Offset.Zero,
    style: TextStyle = TextStyle.Default,
    overflow: TextOverflow = TextOverflow.Clip,
    softWrap: Boolean = true,
    maxLines: Int = Int.MAX_VALUE,
    placeholders: List<AnnotatedString.Range<Placeholder>> = listOf(),
    size: Size = Size.Unspecified,
    blendMode: BlendMode = DrawScope.DefaultBlendMode
): Unit

Draw styled text using a TextMeasurer.

This draw function supports multi-styling and async font loading.

TextMeasurer carries an internal cache to optimize text layout measurement for repeated calls in draw phase. If layout affecting attributes like font size, font weight, overflow, softWrap, etc. are changed in consecutive calls to this method, TextMeasurer and its internal cache that holds layout results may not offer any benefits. Check out TextMeasurer and drawText overloads that take TextLayoutResult to learn more about text layout and draw phase optimizations.

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.ParagraphStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.drawText
import androidx.compose.ui.text.rememberTextMeasurer
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.withStyle

val textMeasurer = rememberTextMeasurer()

Canvas(Modifier.fillMaxSize()) {
    drawText(
        textMeasurer = textMeasurer,
        text =
            buildAnnotatedString {
                withStyle(ParagraphStyle(textAlign = TextAlign.Start)) { append("Hello") }
                withStyle(ParagraphStyle(textAlign = TextAlign.End)) { append("World") }
            },
    )
}

Parameters
textMeasurer: TextMeasurer	Measures and lays out the text
text: AnnotatedString	Text to be drawn
topLeft: Offset = Offset.Zero	Offsets the text from top left point of the current coordinate system.
style: TextStyle = TextStyle.Default	the TextStyle to be applied to the text
overflow: TextOverflow = TextOverflow.Clip	How visual overflow should be handled.
softWrap: Boolean = true	Whether the text should break at soft line breaks. If false, the glyphs in the text will be positioned as if there was unlimited horizontal space. If softWrap is false, overflow and TextAlign may have unexpected effects.
maxLines: Int = Int.MAX_VALUE	An optional maximum number of lines for the text to span, wrapping if necessary. If the text exceeds the given number of lines, it will be truncated according to overflow and softWrap. If it is not null, then it must be greater than zero.
placeholders: List<AnnotatedString.Range<Placeholder>> = listOf()	a list of Placeholders that specify ranges of text which will be skipped during layout and replaced with Placeholder. It's required that the range of each Placeholder doesn't cross paragraph boundary, otherwise IllegalArgumentException is thrown.
size: Size = Size.Unspecified	how wide and tall the text should be. If left Size.Unspecified as its default value, text will be forced to fit inside the total drawing area from where it's placed. If size is specified, Size.width will define the width of the text. Size.height helps defining the number of lines that fit if softWrap is enabled and overflow is TextOverflow.Ellipsis. Otherwise, Size.height either defines where the text is clipped (TextOverflow.Clip) or becomes no-op.
blendMode: BlendMode = DrawScope.DefaultBlendMode	Blending algorithm to be applied to the text