0Pricing
Jetpack Compose Academy · Lesson

drawWithCache & Performance

Avoid rebuilding draw objects each frame.

drawWithCache & Performance is a free Jetpack Compose Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Jetpack Compose Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Drawing Runs Often

Your Canvas lambda can run on every frame. Rebuilding heavy objects there, frame after frame, quietly drags down performance.

The Costly Objects

Things like Path, Brush, and Paint are not free to create. Allocating them on each draw wastes work the GPU never needed.

Enter drawWithCache

The drawWithCache modifier lets you build expensive objects once and reuse them. It splits setup from the actual drawing step.

Modifier.drawWithCache {
    // build once here
    onDrawBehind { /* draw each frame */ }
}

Build Block Runs Rarely

Code in the cache block only re-runs when the size or your read state changes. Put your Path and Brush creation right here.

Modifier.drawWithCache {
    val brush = Brush.linearGradient(colors)
    onDrawBehind { drawRect(brush) }
}

onDrawBehind

Use onDrawBehind to paint underneath the Composable's content. It gives you a DrawScope that runs on each frame, cheaply.

onDrawBehind {
    drawCircle(color = Color.Blue)
}

onDrawWithContent

Need to mix your art with the actual UI? onDrawWithContent lets you draw, call drawContent, and draw again around it.

onDrawWithContent {
    drawContent()
    drawRect(color = Color.Black, alpha = 0.2f)
}

Cache the Path

A chart Path is a classic win. Build it once in the cache block, then just drawPath it every frame without rebuilding.

val path = Path().apply { /* shape */ }
onDrawBehind { drawPath(path, Color.Green) }

React to Size

Inside the cache block you can read size safely. When the canvas resizes, your block re-runs and rebuilds objects to fit.

Avoid State Reads in Draw

Reading state during drawing can trigger extra work. Keep your draw block lean and move setup into the cache block instead.

Measure, Do Not Guess

Before optimizing, profile. The Layout Inspector and frame timings tell you what really stutters, so you fix the right thing.

Reuse Wherever You Can

The golden rule: build heavy objects once and reuse them. drawWithCache makes that pattern easy and your animations buttery smooth.

Quick Check

Where should you create an expensive Brush so it is not rebuilt every frame?

Recap

You learned to keep drawing fast: build heavy objects in the drawWithCache block, draw cheaply in onDrawBehind, and always measure first. Smooth frames! ⚡

Frequently asked questions

Is the “drawWithCache & Performance” lesson free?

Yes — the full text of “drawWithCache & Performance” is free to read here on the web, and the Jetpack Compose Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Jetpack Compose Academy course, upgrade to CoddyKit PRO.

What will I learn in “drawWithCache & Performance”?

Avoid rebuilding draw objects each frame. You practise Jetpack Compose Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Jetpack Compose Academy?

No prior experience is required. Jetpack Compose Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “drawWithCache & Performance” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Jetpack Compose Academy lesson?

Yes. Every Jetpack Compose Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. DrawScope: Lines, Rects & Circles
  2. Paths, Gradients & Blend Modes
  3. drawWithCache & Performance
  4. Build a Live Progress Ring
← Back to Jetpack Compose Academy