Clearing the Drawing

[00:00:00]
>> What we need to do, so as I said, when you click the clear button, at this point nothing is happening. So if we go into our index.js, we're going to start by getting that clear button component or element. So if we write clearButton, we're gonna get document.getElementById, and it has an ID of clear-button.

[00:00:26]
So this is our button to be able to clear the canvas. And we're gonna add an onclick event listener. So if we do clearButton.onclick, we are gonna have an arrow function. And what we're going to do in there is, if you go back to the top of the file and import our resetCanvas function from the utils file, okay?

[00:00:58]
So here we have the first function so we're going to reset the canvas. And just to kind of prepare us for the future state of our app, we're also going to clear the prediction that will be displayed at the end of the exercise. So under resetCanvas here, we're going to get the prediction HTML element, so that's like a p tag.

[00:01:24]
So if we do const and then predictionParagraph or yes, yeah, predictionParagraph should be good. And we're getting the p tag that has the class of prediction. So document.getElements, oops. Okay, getElementsByClassName, and then we're getting, the class name is prediction, and we only have one. So I could have used Id, just used class.

[00:01:56]
So feel free to change that later if you want. But this element is actually going to, once we have our model trained, and we'll use it in the browser, this element will be used to kind of display the prediction inside in the UI. So this particular code right now, is not going to, it's not really going to clear anything because we're not yet ready to display predict but I'm just reading it now so that then it'll be done already for us.

[00:02:24]
So we're gonna reset this the textContent to zero so that later on when we draw our new shape, and it will display a prediction, when we clear, it clears both the drawing and the prediction. And then I had another function here of clearRect that comes from the utils file.

[00:02:45]
So if you call it and you import it from the utils and you call it here, what should happen now is that everything should be figured when we are clicking on that button. So to make sure that it works, what we can do is if you go back to the page and you draw a shape like a square, for example, and you clear and it did not work, so I must have forgot and something, sorry, my bad.

[00:03:12]
Here in the way that already it should be just .js. If I remember correctly, yes, sorry, so here, boom, and well, that's a bad square, but yes, okay. So if you clear the button, it should actually be clearing the canvas. So again, just to recap, we're importing resetCanvas and clear a rectangle from the utils function.

[00:03:37]
Maybe if you decide to then rewrite everything, even the utils from scratch you might call your functions differently or put everything together. But the next thing is that we're getting our clearButton element, and when we're clicking on it, we're resetting everything, including our future prediction label that will be displayed