Canvas Jetpack Compose | Draw on Android Canvas with Jetpack Compose

Jetpack Compose Canvas : Strat drawing your custom UI components –

When we start making our idea into reality by starting making app then we need more than just simple built in UI components likes buttons, texts, edit texts etc. In order to provide us more flexibility with our custom needs for UI components Jetpack Compose provide us Canvas API to draw custom graphics to suits our needs.The old Android View system Canvas was very difficult to work with where you need to make another class and extend it with View then implement required functions to draw basics shapes but with Jetpack Compose- The New Android UI Toolkit made it so simple to work with Canvas. Now Canvas is just a composable function like other composable in compose. You can simply call all drawing functions like drawRect-to draw Rectangle , drawCircle-to draw Circle and much more. So lets begin with it .In this article we will made an Android Bot with Canvas and Compose by using drawing functions available in canvas.

Before getting into compose first we need to get refresh our knowledge with Coordinate system of Mathematics. Our mobile screen comprises of millions of pixels in it. Each pixel on screen have its coordinate points in x-y plane. Have look at this image

In order to draw something on canvas first we must know where to draw it like we need its coordinate .So in android canvas top left corner of the screen start with (0,0) point means we are zero on X-axis and also Zero on Y-axis. Similarly if you want to know the coordinate of the point in the bottom right corner of the screen then it is (widthOfScrren, heightOfScreen).
You can understand pixels with this image. Suppose each box in pic 1 is a pixel so we have 242 pixel from left to right in x-axis and same with y-axis. Using this knowledge we will also position our shape or custom UI elements on the Canvas. Canvas gives us control over how and where we want to put our UI elements or shapes.

In Compose we use Offset to set a point in canvas it take two input one is x value and y value in float. For example Offset(50f,100f) will a point on canvas at x=50 and y=100. 
Lets start making our Bot in canvas. we will make it in parts like head, belly, hands and legs.1. Head-drawArc : to draw head of this bot we need an Arc. So to draw arc in canvas we use drawArc functions which takes arguments like

1.   startAngle=0f           //it means we start drawing this arc from 3’O clock position
2.   sweepAngle=-180f  //anticlockwise from 3’O clock to 9’O clock
3.   useCentre= true       //if true then is will make full arc otherwise incomplete arc
4.   size=Size(width,height)      //width in x-axis and height in y-axis
5.   color=androidColor            //color of the arc
6.   topLeft=Offset(x Coordinate,y Coordinate)  //it will position arc with respect to top left corner

*Offset is a coordinate point in compose which hold the x and y value of a certain point
2. Eye-drawCircle: to draw eyes of the bot we will make two circles which will take following args

1. color= Color().White  //color of the circle
2. center=Offset(x,y)      //center Offset of the circle
3. radius=25f                  //radius of circle

3. Belly-drawPath: To draw belly we can use drawRect but it will not give us option to make corners round. So we will make a custom path and show the belly and to make path we use these functions

1.   moveTo(coordinate of Start point) : here pass x and y of point from where we want to start the path
2.   lineTo(coordinate of Next point) : here pass point for next stop and it will connect these two points with a line
3.  quadraticBezierTo(coordinate of control point, coordinate of end point) : to make curve path we use this function. see in picture that how we can control the curve with change in the position of control point.
4. close(): At the end we will close the path.

now to show this path we need to pass it in the drawPath function and it will be visible on canvas.
4. Antenna-drawRoundRect: to draw antenna of bot we will use roundRectangle which is rectangle but with rounded corner to give smooth look. To rotate this round rectangle we will use the rotate function which will take args

1.  degree: -20f // it will rotate any object which will be drawn inside rotate function
2. pivot: Offset(x,y) // pivot is a pivoting point for an object to rotate on. Object inside rotate will rotate with respect to pivot Offset.

 drawRoundRect will take following args

1. color=androidColor  //color of the rectangle
2. size=Size(25f,100f)  //size of the round rectangle
3. cornerRadius= CornerRadius(50f)  //radius for the corners
4. topLeft =Offset(x,y)   //Coordinate of left left corner of this rectangle

5. Hands and Legs will be drawn with same drawRoundRect function with changes in its topLeft arguments.
6.Name- drawText: to draw name or say text on canvas we can’t directly call drawText method. We need the native Canvas Scope to draw the text. So we will access this scope with help of current canvas.But before drawing any text we need to make a paint object where we decide the color, font, size of text. then we pass this in drawText function which takes following args

1. text= “Name”  //text to draw on canvas
2. x value=100f  //x coordinate
3. y value=200f  // y coordinate

paint=textPaint  //paint created for this text
That’s all for this article. Please checkout my YouTube Video for more clarity.