Jetpack Compose — Drawing custom shapes (Circle, Rect, Paths)

<p>Before starting, it&rsquo;s good to have a grid notebook, something you can just use pen and paper and draw what you want to draw there first. The 0,0 is always in the top left corner. It&rsquo;s basicly the reverse coordinate system. In a grid of 100x100, the bottom right corner is 100,100. All these examples will use a canvas of 100x100. For each of the example I&rsquo;m gonna use a little different approach. End result still remains the same.</p> <h1>Circle</h1> <p>The most basic way to draw the circle</p> <pre> @Composable fun MyCircle(){ <em>Canvas</em>(modifier = Modifier.<em>size</em>(100.<em>dp</em>), onDraw = <strong>{ </strong>drawCircle(color = Color.Red) <strong>}</strong>) }</pre> <p><img alt="" src="https://miro.medium.com/v2/resize:fit:330/1*o1_MagQWVL3b_u1fRgRVGg.png" style="height:280px; width:330px" /></p> <p>Drawing Micky Mouse (kinda). May seem a lot, but its just basicly 3 circles. One for head and two for ears. Head at center, left ear at 25x25 and right ear at 75x25.</p> <p><a href="https://primasky.medium.com/jetpack-compose-drawing-custom-shapes-circle-rect-paths-12a47180304d"><strong>Learn More</strong></a></p>