Hi everyone and welcome to another code cast. And in this code cast we are going to be drawing a circle onto the canvas. And so in the last one we drew a rectangle as you can see here. And in this code cast we're drawing a circle which is a little different from drawing a rectangle because canvas doesn't have a built in wrecked method which creates rectangles. Instead we have to use something called the Arc method. Now the arc method. So let me just take this out. So the Ark method is going to take a couple of arguments. It's going to take an X coordinate which is the horizontal coordinate of the ark's center. As you can see in this diagram here and then it is also going to take a white coordinate which is the ritual coordinate of the ark's center and then we have the radius. Okay. And this is this distance that you can see here from the center to the outer point and the radius has to be a positive value. It can't be any negative value. After that you have a start angle and the start angle is from the angle at which your circle starts in radiance and then we have an end angle and the end angle is the angle at which the circle, your circle will end. And this also has to be in radiance and lastly we have a direction um argument and this is an optional boolean value. So if true, it draws the arc counterclockwise between the start and end angles and the default is um you know the boolean false value, which is going to draw your circle clockwise. Okay, so that's all for this part. Now let's actually start drawing our circle. So remember, like I said, we don't have a special method for building a circle. Like we had direct method when we drew the rectangle onto the canvas. So we begin by using the beginning path method. And what this does is that it's going to start a drawing fact for us. Now, I'll also use the fill style property. I'll just set it up here right at the beginning before I do anything else. And this is going to have a shrink value of black. So we'll make a black circle after that. We'll now use the arc method that we just talked about. Okay, And let's take a 150 value for X, then Y And read radius at let's say 40 and then start at zero and end at let's see two kinds math dot hi. And this is going to be false. Okay, so let me explain what exactly is happening here. So our ark is given an X coordinate of 1 50 A Why coordinator of a 60 a radius of 40. And to make a full circle, the ark begins at an angle of zero radiance and it ends at an angle of a two pi readings, which is a 360 degrees. So the value of math dot pi is approximately 3.141. So one pie is one half circle And a full circle would be twice that value. So two pi. And after that I will fill my circle with the black color with context dot fill method control S to save and let's take a look. So there you go. I have my circle this black circle out here and we can even change this value. We can so basically I can change this value to be let's change it to 3.14 to see if that is going to give us a half circle and let me go ahead and save this and index dot preview. There you go. So I have my half circle and if I want it to be a full circle it's going to be double the value of 3.14. So let's go ahead and try 6.14 here control S and we might see a full circle which we do. So instead of using two times math dot pi you could just use a static value like this. Now you might be wondering why we didn't have to call context dot path, begin path, sorry method with the rectangles that we drew and I just talked about that. It's because there's no so you know methods like context dot Phil recht and stroke correct, begin to create a path and basically rendered the rectangle onto the canvas in a single step so we don't have, you know a stroke circle path for for drawing circles and rendering them to the canvas. So we have to use a begin path out here and that's all for this code cast. And in the next one we'll talk about drawing lines.