Canvas in Jetpack Compose
Tags: android, beginners, programming, frontend
Published: 2023-08-25 13:49:12

![Android gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vfvqqodjuyq86yn4ima8.gif)

Hello, fantastic person on the internet! I hope you’re doing well.

We all know that Jetpack Compose is excellent for creating native Android UI, but do you know how we can achieve this using the Canva API?

&nbsp;

## Canvas API

The Canvas API unveils a new realm of possibilities, allowing us to paint and sculpt the UI with unparalleled precision and artistry.

&nbsp;

## Screen

We need first to understand how the screen works. Our interface is composed of many pixels, and the more pixels we have, the cleaner the components will be.

To observe that, we can simply zoom in on a component:

![pixel image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i5mq7moj44azwyxplgsc.png)

Knowing that we can begin drawing using the Canva API.

&nbsp;

## Implementation

Go to your compose function and invoke the Canvas method.

{% embed https://gist.github.com/MariaLuiza-CS/74d7932e8f849c68fca7226bdfe290bf %}

Now, you have the ability to start drawing. These are some simple functions that can assist you:

- Use `drawRect()` to draw a square.
- Use `drawCircle()` to draw a circle.
- Use `drawRoundRect()` to draw a square with rounded corners.

&nbsp;

## Square

### To draw a simple square:

{% embed https://gist.github.com/MariaLuiza-CS/9e55082606189647184e7591bfeed977 %}

![square image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/og403szoflximypemfp7.png)

### To draw a square with rounded corners:

{% embed https://gist.github.com/MariaLuiza-CS/076dd78968313572237fdd86ab08cb4b %}

![square with rounded corners](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ag6ic0oixpvjj8445nke.png)

&nbsp;

## Circle

### To draw a simple circle:

{% embed https://gist.github.com/MariaLuiza-CS/f9d94d9259dd013a72451f956214fa40 %}

![circle image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xqt1s9zthinpuref2rzj.png)

### To draw a simple circle with stroke line:

{% embed https://gist.github.com/MariaLuiza-CS/cbb2f3af942d7eea7f4da8c0284aff28 %}

![circle with stroke line image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/83s4x20w1a4mllr7pu1e.png)

&nbsp;

## Positions

You can also change the position of the element by a specified number of pixels.

Imagine that I have a square of 100 pixels:

![pixel image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/coh6a0zz7clwytg45z3c.png)

I want to draw a square in the bottom left corner, taking up only half of the layout. We can use topLeft to set the alignment, and I can adjust the offset for both the X and Y axes to 100f:

{% embed https://gist.github.com/MariaLuiza-CS/6188df1dfaf1546fb40aa446f349f1eb %}

Your layout is going to look like this:

![pixel image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d630hhfj9d4wgm42jzf0.png)

&nbsp;

## The power of Canvas

You may be wondering why you need to draw a circle or a square. The answer to that question is that, with simple symbols like that, you can design many other beautiful and unthinkable illustrations.

For example:

### Amazing graphics

![graphics](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2nb7jn6wkhq8220j6kmk.png)

### Logos

![instagram logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xcm3ciqvvlgtgg3qa50n.png)

### Or any shapes

![spiral, flower and waves images](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yy5tqhjl1tc78149657m.png)

&nbsp;

## Conclusion

The Canvas API can be extremely useful when you need to create unique illustrations or when you can’t find a high-quality one.

You can combine the Canvas API with Compose animations to create beautiful layouts. [Check my article on animation created using Compose for more information on this topic.](https://dev.to/marialuizacs/animation-component-with-compose-132g)

All the code and examples it is [in this repository.](https://github.com/MariaLuiza-CS/CanvasWithCompose)

Happy coding ❤

---

Please let me know what you think in the comments…

Connect with me 👇

[Linkedin](https://www.linkedin.com/in/marialuiza-cs/)

[GitHub](https://github.com/MariaLuiza-CS)

[Instagram](https://www.instagram.com/luiza.android)

[Twitter](https://twitter.com/luiza_android)

[Medium](https://medium.com/@MariaLuiza-CS)

![dinossor google gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uww8lyryl1k4rotsbk2q.gif)