# Paint the Stars - Drawing with Compose and Canvas

DevFeed: [Paint the Stars - Drawing with Compose and Canvas](<https://devfeed.tech/articles/paint-the-stars-drawing-with-compose-and-canvas-38491.md>)

Original publisher: [Read original article](<https://eevis.codes/blog/2024-09-26/paint-the-stars-drawing-with-compose-and-canvas/>)

Author: Eevis Panula

Published: 2025-06-11T04:12:11.371000Z

Content type: tutorial

Language: en

Sources: [Eevis Blog](<https://devfeed.tech/sources/eevis-blog.md>)

Topics: [Canvas](<https://devfeed.tech/topics/canvas.md>), [Compose](<https://devfeed.tech/topics/compose.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [animation](<https://devfeed.tech/tags/animation.md>), [blog-post](<https://devfeed.tech/tags/blog-post.md>), [canvas](<https://devfeed.tech/tags/canvas.md>), [code](<https://devfeed.tech/tags/code.md>), [compose](<https://devfeed.tech/tags/compose.md>)

## AI overview

A tutorial on drawing a space-themed illustration with Jetpack Compose and Canvas. It explains how to create the background, Saturn, stars, and other visual elements, while noting that the example's hardcoded dimensions are specific to the drawing and are not generally reusable for resizable canvases.

## Source excerpt

I've always struggled with drawing in Canvas, not just with Compose's Canvas but with any technology. I've understood enough to be able to do the tasks I needed to do, but at the same time, I've tried to avoid working with it. On one Sunday, I wanted to do something creative. I also wanted to code, so I started with the idea of creating a loading spinner with Canvas. One thing led to another, and I made a nice animation, that's more of a piece of illustration than a loading spinner: In this and the following blog post, I'll share how I did it and some things I learned along the way. The first blog post is about drawing the elements on canvas, and the following is about animations. The Idea The initial idea for the space-themed illustration came from a t-shirt I have. It's this I Need Space t-shirt from the Spark Company. I initially thought I could try to reproduce the same picture, but once I was done with the Saturnus, I decided to go rogue. I chose to add other elements and make the stars differently. I'm delighted with how it turned out! Let's dive into creating the illustration next. You can find the complete code for this blog post from this code snippet. Components Before talking about the components, I want to note something: The exact numbers I'm showing here fit this particular drawing and can't be generalized for the most part. I've calculated the positions and sizes based on the defined canvas, not for a resizeable canvas. The first component is the background and canvas itself. There's a Column as the parent component and then Canvas as a child. This lets us define the animations and other properties you can't define in Canvas. For drawing the background, we'll use a drawBehind-modifier in the parent Column, draw a round rectangle and define a radial gradient brush with some colors: Modifier.drawBehind { drawRoundRect( size = size, cornerRadius = CornerRadius(44f), brush = Brush.radialGradient( colors = listOf( Color(0xFF02010a), Color(0xFF04052e), Colo