# Not a Phase - Text with Compose and Canvas

DevFeed: [Not a Phase - Text with Compose and Canvas](<https://devfeed.tech/articles/not-a-phase-text-with-compose-and-canvas-38494.md>)

Original publisher: [Read original article](<https://eevis.codes/blog/2024-11-10/not-a-phase-text-with-compose-and-canvas/>)

Author: Eevis Panula

Published: 2025-06-11T04:11:58.849000Z

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>), [Google](<https://devfeed.tech/topics/google.md>)

Tags: [animation](<https://devfeed.tech/tags/animation.md>), [canvas](<https://devfeed.tech/tags/canvas.md>), [code](<https://devfeed.tech/tags/code.md>), [coding](<https://devfeed.tech/tags/coding.md>), [compose](<https://devfeed.tech/tags/compose.md>), [design](<https://devfeed.tech/tags/design.md>), [fonts](<https://devfeed.tech/tags/fonts.md>), [google](<https://devfeed.tech/tags/google.md>)

## AI overview

A tutorial on measuring, drawing, positioning, and animating text on a Jetpack Compose Canvas. It also describes using custom Google Fonts and a bisexual pride flag color gradient in the animation.

## Source excerpt

I've continued my journey with Compose and Canvas! After exploring drawing and animating shapes, I wanted to learn more about text. Bi-visibility Day was coming, so I drew a small animation to publish on Instagram. The final animation looks like this: In this blog post, we will look at how to add text to Canvas and position and animate it. We're also utilizing custom Google Fonts in the drawing. If you're interested in reading the first two posts, here are the links: Paint the Stars - Drawing with Compose and Canvas Floating in Space - Animations with Compose and Canvas Before We Start Before we start drawing, I want to say a few words about the design. It has the moon in the waning crescent phase, with a dashed line to complete it to the full moon shape. The text says, "Not a phase". Now, if you're familiar with the discrimination and stereotypes bisexuals face, you probably already know what all of this means. But for those who are not, one of the stereotypes is that bisexuality is "just a phase on the way to being straight/gay". But it's not - it's an (umbrella) term for people who feel attraction towards their own and other genders. And even if a bi person is in a monogamous relationship with a person from one gender, it doesn't make them straight/gay. They're still bi. So yeah, we're here. We exist. Now, let's get to the coding part. Drawing the Text Measuring Drawing text on Canvas is a two-step process: First, measure the text and then draw it. To start with measuring, we'll need a TextMeasurer, and with Compose-code, we have this neat remember-function we can use: val textMeasurer = rememberTextMeasurer() For measuring, TextMeasurer has a function measure, which takes in the text as either AnnotatedString or String, and a bunch of other (mainly) optional parameters that affect the size of the text. Things like density, layoutDirection, style, fontFamilyResolver, and others. We will divide the text into two strings, as we want to animate and position them a b