in this code cast, we'll go over drawing lines to the canvas. So to draw a line, we'll use to new methods and the move to and line two method. And first let's define a path and then we'll fill the path. And as usual let's start with the beginning path method to start a drawing right okay. Now before we start drawing anything to the canvas, let's give our line a couple of properties. And let's give the line a line with property to make the line thicker so that we can see it. So context got lined with. And this is with camel casing is equal to some number. Let's use seven here and then let's also change the color of the line with the stroke style property. So context dot stroke style which again is in camel case and the value for this is a string. And let's give this a hex code. So this is going to be a nice gray color. And after that another property that we can add is that the line cap property. So context got online cap. And let's set the value of this property to a string which is round. Now there are other values as well for the line cut properties such as square so that the line ends with a square end. We're going to be ending our line with a round cap. No, to actually start drawing the lines. We first need to use the move to method which will move the path to the specified points in the canvas without actually drawing the line and it takes two arguments. So it's gonna take X, which is a positive positive or negative number. That specifies the horizontal coordinate to be moved to and why? Which is going to be a positive or negative number, which specifies the vertical coordinate to be moved to. And for now we'll just leave it at 00 for both the X&Y values. So context got moved to And we'll just leave this at let's see, zero and 0. Then we have the line to method which will add a new point and creates a line to that point from the last specified point in the canvas. And once again, this method actually doesn't draw the line will come to that. We're just creating points for now. So context dot line two. And let's say we are going to move it along the X axis by 1 80 leave the Y value as is So this will create a starting point from X zero and Y 02 X 1 80 Y zero. Lastly to draw the line. We need to use the stroke method and let's go ahead and do that. So context got a stroke and control s to save and there you go. So you see we have this line here in the index dot html preview. It's right above here. You might not be able to see it really clearly because it's this great. Color. So let's move it around a bit. Now let's move the line down on the vertical y axis by 40. So it starts at Y zero and ends at Y. 40. Which will give us a nice slatted line. So what I'm going to do is change the Y. value here to 40 control s to save and there you go. So now we have this nice slanted line by changing the wide value to 40 and you can continue adding on to this line by using the line to method. For example let's say context dot line two and let's say zero from the current point and then 50 whoops typo and there you go. So now we have this big kind of shape. And as a side note you can use a negative numbers as well. Moving along the negative y axis will move the line up and moving along the negative X axis, moves the line to the left side. So let's just try negative 50 here and there you go. So it moved it up along the y axis. So that's all about a drawing lines. In the next podcast we'll talk about drawing triangles