Okay now let's work on allowing the user to save their signature once they're done by clicking on this green safe button and we'll use the local storage Api which stores information in key value pairs so as an object. Now the local storage api stores data with no expiration date. This means that when the browser is closed or refreshed the data process persists. Okay. So we're going to work on saving a user's signature when they click on this green safe button here and in index dot html you can see that the button, the green safe button has an on click attribute whose value is equal to the function safe. So in script dot Js let's declare a function safe. Right, okay, next let's save the current signature to the canvas as a drawing and the way to do that is and oops I did not use the correct curly braces there. Okay, so let image is equal to canvas and use the two data. You are real method. Okay. And I'm going to save the image as a PNG Okay, let me explain what is happening here. The canvas to data you RL method is going to take as an argument the representation of an image in the format which for us is in PNG and it returns a data you are Right. So let's just console dot log image here to see what am I talking about. Right. And let's go ahead control s and then we go to the browser control shift. I let's open up the console and let me just assign something here and click on safe. There you go. So on the right side in my console, you see the data you are I for this signature as an image and data you are i is basically a scheme that allows data to be encoded into a string and then we can embed this directly into html. So if I click on this here, you'll see this signature saved as an image and once it's saved in local storage, we'll actually be taking this image and then drawing it onto the canvas when the user refreshes or visits the browser page again. So let's go back to the code editor. So we've gotten an image representation of our signature data. Right next we need to store this data in local storage. So we're going to use the local storage api here and we are going to use the method called a set item. Right. Let me just move this up. Okay, so the set item method is going to take as an argument a key that we will just call a signature. So it can be any string you could have called it a sign or you know anything else. It's going to take a key. And then the value of that key which is the variable image, which references are a signature image. Right. So the set item method of the local storage aPI sets the value of a specified storage item as an object, which means key value pair. Okay, now, so we've saved the data to the browser. Right? But so if I go back here and then I refresh and I try this again it's saved. But upon refreshing you see that even though the data persists as an image in local storage, it's not there on the page as yet. So we need to draw back this image is signature onto the page. So once we sign it here and we've got an image representation of our signature, we need to be able to draw it back to the canvas when I refresh the page. Like so so let's work on that function uh next. And what we're going to do is basically we're going to say when the browser window loads. So using the on load ah then we want to execute a function. Right? So on window on load we want to execute a function. And inside this function we are going to instant she ate a new image using the image constructor function. Right? And once the image on load event occurs. So once the image has been made it's loaded. Then we want to execute a function right? And the function inside the function we are going to draw our image using the draw image methods. So we'll draw the image to the uh to the context and the draw image method is going to take as arguments the image that we're going to draw plus values for the X and Y coordinates on the canvas. So we're starting from the upper left corner of the canvas? That's where we want to start drawing our image signature image from. Now. Lastly once the image has been loaded onto the kindness then we will set its source attribute to be the source in local storage. So image dot source attribute is equal to local storage A P I. And use the get item method. Right? So I'm using the get item method of the local storage Api and we're going to get the key called signature. Right? So we're going to get the key that we saved and it's called a signature. So the get item method Retton's a the value of a specified storage item which you might remember is stored as an object. So we're getting going to get the value of this key and the value of this key is this image up here. So our signature saved as an image in PNG format. Right? So let's go ahead and now control as it is safe. And then I'm going to go to the browser and let's try this. So you noticed that when I clicked on when I refreshed the last thing that was saved comes up, right so I can try this again and I refresh and my um signature is still here. So safe. It's saved and when I refresh there you go. Um I can do it with maybe add some more with blue ink and then save and refresh. It's there. Now, what's annoying is that I cannot clear my canvas because it says clear SIG is not defined, so we haven't worked on this function as yet and it's a tiny function. So let's go ahead. And in the next podcast, we'll finish this project off by working on clearing the user's signature on the canvas.