So the draw function draws the signature along the canvases X and Y coordinates. And let's declare a function with function draw. And as you remember when we call the function, it takes a context as an argument. So we need we need a context program and then X and Y, which represents the mouse says X and Y coordinates along the canvas right now. Next we use the beginning path method on our to the context and the beginning back method begins a growing path since we can't really use any ready made methods like wrecked for drawing alphabets, alphabets that are going to be connected along the X and Y coordinates. Now to actually start drawing the lines. We first need to use the move to methods so move to and this method moves the path to the specified points in the canvas without actually drawing or joining these two paths. And after that the move to method is going to take as arguments the last X variable and the last Y variables which have a reference to the last X and Y. Points on the canvas when the mouse button is pressed down. Then we have the line to method on the context to the context or line too. And the line is to method will create a new point and it creates a line to and from that last from the last specified point in the canvas. So we also need to pass an X and Y here. Right? So this method does not actually draw the line. The line to method will add a new point and it creates a line to that point from the last specified point on the canvas. Lastly to draw anything, we will use the stroke method which actually draws or connects the two points. And then we also closed the drawing pad with the Okay post path method called on the two D context. Okay, there you go. Right, so that's all for function draw which we've declared here but called here on mouse move Now lastly we need to add a couple of event listeners which will listen out for a mouse down mouse up and mouse move events and callbacks some functions in response. Right? So we can use window dot on load event but let's just use an initial Isar function called function in it. And then we are going to add to our canvas and event listener and this is going to take as the first argument mouse down And in response to a mouse down event we will call the function on mouse down which we declared up here. And lastly we have the bullying falls and the bullying falls here specifies whether we want our event to be captured in the bubbling phase or not and which we don't in this case. Next up we add to our canvas another event listener method which listens for the mouse move event and in response it calls on a mouse move a function. And then since we're not listening we don't want to event to be captured in the bubbling phase. We just as falls and then we have cameras dot add event listener which is going to listen for mouse up event so nobody is. So when a user is basically not doesn't have the mouse button down. Right. And then in response we will call the on mouse up function and once again false is passed to this method as the third argument. Now, if you remember these functions we declared up here. Right? So on mouse down on mouse up on mouse move but we haven't called these functions anywhere. So we have added event listeners to our canvas. And then in response to the mouse down mouse move and mouse up events, we execute these functions and lastly we also need to actually call the function in it. Right so called the initialize function. And let's try this out now. So I'm going to control S and then we can try it here and here you go. On the right side you can see I am basically just drawing here and um you know, I have my drawing. So that's all for this section. We are now able to basically, you know, right, our or sign our name in this small canvas here which represents the signature place. And moving on in the next podcast we'll add a few more features for example adding different pen colors and then we'll finish off by using the local storage Api which will allow us to save a signature so that even when we refresh the signature is still there and we'll also you do a small function, which will allow us to clear the canvas of any signatures. Okay, so moving on, let's work on the draw function and.