# Be Mine and Add Interaction with Compose and Canvas

DevFeed: [Be Mine and Add Interaction with Compose and Canvas](<https://devfeed.tech/articles/be-mine-and-add-interaction-with-compose-and-canvas-38501.md>)

Original publisher: [Read original article](<https://eevis.codes/blog/2025-02-13/be-mine-and-add-interaction-with-compose-and-canvas/>)

Author: Eevis Panula

Published: 2025-06-11T04:08:03.778000Z

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>), [compose-multiplatform](<https://devfeed.tech/topics/compose-multiplatform.md>), [SVG](<https://devfeed.tech/topics/svg.md>), [Figma](<https://devfeed.tech/topics/figma.md>)

Tags: [canvas](<https://devfeed.tech/tags/canvas.md>), [compose](<https://devfeed.tech/tags/compose.md>), [creative-coding](<https://devfeed.tech/tags/creative-coding.md>), [figma](<https://devfeed.tech/tags/figma.md>), [interaction](<https://devfeed.tech/tags/interaction.md>), [svg](<https://devfeed.tech/tags/svg.md>)

## AI overview

This tutorial shows how to use Compose and Canvas to draw interactive heart-shaped candies. It explains detecting pointer input gestures so the candies scale larger when touched, and builds on earlier work using SVG path strings with Compose Multiplatform.

## Source excerpt

Valentine's Day is approaching, and while I prefer the Finnish version ("Friend's Day"), I was inspired to do some creative coding in the holiday theme. The Hollywood-centric film industry (in addition to globalization in general) has carried those heart-shaped candies to the North as well. While browsing some images for inspiration, I decided to use them for the next piece I'm writing. And that's not all! I also wanted to continue my series of Canvas-related blog posts, so this one walks through another concept with Canvas: How to detect pointer input gestures and add some interaction. So, what are we building today? Here's a video showing some heart-shaped candies with messages and how they scale bigger when I'm touching them: Let's get coding! Drawing the Hearts This project builds on my previous blog post, Using SVGs on Canvas with Compose Multiplatform, which explained how to draw from SVG's path strings to Compose Canvas. I prepared an SVG image on Figma and then extracted the path strings to draw the hearts. We will utilize some functions from the previous blog post: Float.scaleToSize and PathNode.scaleTo. I won't explain them in this blog post; just mention them. If you want a refresher on how they work, head to the blog post describing them. Alright, let's start by drawing one heart on Canvas. Drawing One Heart We want to extract the logic for drawing the heart to a function. Let's call it drawCandyHeart, and pass the top-left offset, the size of the heart, and the color we're drawing the heart with to the function: private fun DrawScope.drawCandyHeart( topLeft: Offset, heartSize: Size, color: Color, ) { } I've defined the path strings in a separate list, but I will leave them out from this blog post for brevity. They're included in the final code, which you can find at the end of the blog post. We can get the path strings with a function pathString(color: Color): Pair<String, Color>, which returns the two path strings with the color with different opacity