now let's work on the functionality starting with letting a user sign um onto the canvas using their mouse. And for that we will use a couple of methods that we already learned about in previous code cast, for example the stroke method, lying to method etcetera. And before we do any of that, let's set up a few global variables. And we'll get a reference to our canvas element in the dom by using this dumb method called get element by ID D. And the I. D. Of the canvas element is just canvas. So if we come down here you'll see that the idea of the canvas element is just canvas. Right? And then moving on, let's also get a two D context to the canvas. So let context is equal to and with God get context and the context that we want to get is a to the context. And then we have a variable called let a mouse down which is set to the bullying falls. So this uh variable is going to basically keep a track of whether the mouse is clicked down or not. And we also have two other variables whose values are not as yet defined. So let X last X and last why? Yeah. So we have a reference to the canvas element and we've set it to the context for a canvas with the get context method, the mouse down variable is set to the bullying falls and we have two other global variables last X and last Y. Which are going to reference. The last exposition of the mouse on the canvas and the last white position of the mouse on the canvas. Right? So first let's work on a function which will give us the mouse coordinates along the X and Y. Access on the function on the canvas. And this function is going to be called function get mouse and position and we pass in event as an argument. So inside this function will declare an object called mounts objects. So let mouse object is equal to so it's an object And it has two key value pairs. So mouse X, whose value is event dot off a set X. And I'll just explain this and we do the same thing of four. Um Mouse why whose value is event dot off the set Why? So the html dawn mouse event of set X property returns the horizontal X coordinate off the mouse pointer relative to its target element which in this case is the canvas. If a mouse event was indeed triggered and then we use the offset why? To get the vertical coordinate? And this function is going to return to us the mouse object. Right? So once we've so once we call this function get mouse poised which takes event as a parameter here were returned with a mouse object which has two properties mouse X and mouse Y. Which referenced the X and Y positions on the canvas right now let's work on three functions which will detect when the user's mouse button is pressed down and when the mouse is not being clicked down which means the mouse button is up. And lastly we'll trace the points when the mouse moves. So let's work on the mouse down function. So I'll call this function function on mouse down. And oops it takes event as an argument or parameter I should say here. So we've declared a function called on mouse down which tracks the mouse down event. And first of all we will set the global mouse down variable to the bullying. True. Right? Since the mouse is being clicked down, then we declare a local variable. Right? So we let X. Y. And this is a function assignment. So the mouse object that is returned from the get mouse because uh function is going to be assigned to the X. Y. Variable. And we can let's just verify this. Right? Um Well we'll verify this leader, let's just finish this first and then we have another. What we're going to do is we're going to set the last X variable. The global variable that we declared up here. Right. And we want to extract the X and Y positions from this object. The xy object. And the way we do that is we're going to do X Y dot mouse X. Right. And then the same thing for last. Why? Which is going to be X. Y. Got mouse. Why? So remember mouse X. Is this property here which references the X. Um position or the X coordinate on the canvas. And here when we are returned with the mouse object we're extracting the X. Property when the mouse is down. And then we extract the white coat. The mouse Y property which references the Y coordinate when the mouse is down. And the next mouse event function that we're going to work on is called on a mouse up. That means that uh user stops pressing down on the mouse button so the mouse button is up. And in our use case that means that the user is not signing them me. So we'll call this on a mouse up and it takes an event as a program. And next we'll set the global variable mouse down to the bullying falls. And that's all we have to do for this function. Now for the next function we will um work on a function called mouse move. And this dictates what happens when the mouse is moving. So let's declare a variable and let me just push this down a bit. So function and on mouse move. It also takes an event as a argument. Right now. Inside this function we will execute some code only if the mouse button is clicked down, which means only if the mouse down. Variable is strictly equal to the boolean. True. So let's set up our condition here. So if mouse down variable is strictly equal to the bullying. True, then we want to do something. Right? Then we want to I say let X. Y. So again just a local variable. Right? Is get mouse okay, position, function event. Right. And then after that. So once we get the X and Y. We get this mouse object which is assigned to this local variable called X. Y. The next thing that we want to do is actually to call a function which we have not written as yet, but we want to start drawing something along the X and Y axis. So the way we do this is draw. So we'll call we haven't worked on this function as yet. But let's suppose we're calling the function. The function will take context as an the argument and then it will take X. Y. God. So let's extract the mouse exposition. And then we also extract the mouse Y position from this mouse object. And this object is referenced by a local variable X. Y. Here. After we're done we then reset the last X. Global variable to be X. Y. Not a mouse X. And then last Why global variable to be xy dot mouse. Why? So we've repeated a couple of things that we did before. Right. So we got we called this is a function assignment. Okay, So we basically assigned the return of this function and the return is this object and this object is then assigned to this global. Sorry, local variable called X. Y. Because we need a way to store this value. This object that is returned after that we call the draw function and we have not worked on the draw function as yet. We will moving on and the draw function it takes as arguments, the two D. Context and then the X and mouse Y properties. So the values of these properties which are extracted from local variable Xy. Which you know, references the most object. And after the draw function is called, we need to reset the last X and last Y. Global variables values to the new position of mouse, X and mouse Y as it moves on the canvas. So moving on next, we work on the draw function, which will allow a user to draw their signature along the mouse is uh sorry, along the canvases, X and Y coordinates.