in this podcast we will allow a user to add some filters to the image and I'm using the same project as last time with the exception that I've added the Bootstrap library so that we can center things easily using utility classes instead of having to do a whole lot of CSS. So first of all, I'm going to set up a container with a row and column. I let the canvas element B as is So I'm doing this down below. So div class container and then I will close my container. Oops. Okay, okay. After rich we have a div class is equal to rho and then I will close this role as well. And within this rule we will have a column. So this class is equal to call a small trove and then I will close this as well. So I've set up my container with a row and column. So these are these classes are custom or utility classes that bootstrap provides to make your pie html responsive to screen sizes. Now after this, I'm going to put in a few input sliders. So the basic premise is that I want a few custom sliders down here so that I can add filters such as opacity, grayscale brightness to our image. So let's go ahead and do some more html. And I'll start off with the label tag. So label for Q and we'll adjust the huge of our image first. We'll experiment with that. Mhm Close label and now I'm going to put in my input element. So input class is equal to form dash range. This is a custom bootstrap class. And inside of here let me use the type attribute to specify that it's going to be a range input And we'll start at a value of zero and the minimum value. So the minimum value is zero, we'll set a max at let's say 300 step is equal to one. And I don't really, I think with an idea though I don't anticipate real need to style this. So anyways it doesn't matter. And then I have the on input attribute whose value is a function that we haven't written as yet. So I'll call this hue function and Hugh function takes the parameter this dot value. And let me go ahead and save this. And now I need, what I'm going to do is basically copy, paste this two more times because we have three in total of these input ranges. So I've copied it once and I am going to now for the second one. Just to change the function here. So instead of a huge function we will call it opacity function and I will also change the value of the I. D. Attribute to be capacity. And then let me um also change this. So for a label for opacity and once again let's change this here. Opacity and safe. So now on the right side you will see I have an input range for Hugh And input range for opacity doesn't do anything as yet. Everything remains the same here in my html Except for the on input function value, sort of the on input attribute value, the I. D. And then this label so I will paste this once more and now we will this is the label for the brightness so that we can adjust how bright the image is going to be when we apply the brightness filter and then this I. D. Changes as well and I will change it to brightness and then this function name will change as well and I'll see this is brightness a function. Okay, so what's going to happen is that we'll adjust the range on these inputs and be able to apply filters to the image. Now instead of putting filters onto this image which is drawn on the canvas, we'll be putting them on a copy of the image just so that you can compare the original image alongside with the filter applied to this new image. Now notice how each of these input ranges has an on input attribute whose value is a function. And the function takes the current value from the input range as an argument. And this is what the this keyword refers to. And in each input range we have a starting value of zero and the max value is 300 and we also have a step value of one and this specifies the number we want to increment or detriment by as we increase or decrease the value on the slider. So that's all for our html. So control s to save and that's pretty much it. We're done. Now let's move ahead and go to script dot Js which is our javascript file. And this is where we will start adding in some functionality. Now let's insubstantiality a new image which is the standby for the image with the filter on and we'll also give it an I. D. So let filter image is equal to oops new image and semi colon. And then I will give the filter image that is going to be substantiated and I. D. So filter image dot I. D. Is equal to. And let's see this is a filter dash apec. And then let's end this statement of code. So this is the image that will apply filters on. And let's work on the hue function which is associated with the first input range on the left. So we are going to be working on this function here. Okay, now let's type this out and see what exactly is going to happen. So function Hugh function and this will take in let's say this is Hugh Well, and I'll explain in a bit what's happening. Uh So I've declared my function and now what we want to do is we want to set the source attribute off the filter image to be the same as the source of the image that we have on the canvas element. So let's do that. So filter image dot S R C. You can also use the set attribute Dom function. I'm just doing it in a shorter way with dot notation and S R C. So it's equal to Candace. Got to data. U r L function which is going to take i MG source as an argument. So the two data U r L method allows you to store an image drawn on top of the canvas element in the form of a data U R L scheme. And basically uh you can alert filter image dot source to confirm this. So out here, I'm just going to alert filter image dot SRC and then let me control s this to save and there you go. So it's this method is allowing you to store an image in the canvas in the form of a data u R L scheme. Okay, now let me go ahead and comment this out because we don't need this. And next yeah, what we're going to do is we're going to have a local variable called let's say range value whose value value will be whatever number is passed on from the input range when this function is called right and this is going to be contaminated with a string. So let's go ahead and work on this. So let's range value is equal to Hugh valve, which is the hue value, which is whatever value we get when we're sliding this uh include range left or right. Okay, so you value plus sorry, plus the string. The E G rick stands for decree. So just basically you'll see where I got this from and where I'm going with this coming up. Okay, so just give me a second or we can go over it right now. So what is happening is that we're going to apply the CSS filter property, which can be used to apply effects like blur or hue to an element. And on this page here you can see all the different values for the CSS filter properties, a filter property story and the units which are associated with the values. So here we are using the we're going to do Hugh rotate and this takes degrees as um the value has to be in degrees, brightness is just like this. It can be and then we have um opacity also out here which is in present. Okay, so this is where I'm getting this D E G from. Right, so let's move on. Now what I'm going to do is now that I have this value in my function. Did I? Okay, let me control this. This so that that alert is not troubling us and okay, Silver control s I guess I didn't save. Okay, so now let's apply the filter of property. So filter hey mitch got set attribute. I'm just gonna use that attribute here because it's a bit cleaner to do this. So I'm going to apply this, I'm going to apply a style and the style that I'm applying is a filter. So the CSS filter property which takes as an whose value is you rotate and Hugh rotate is going to take as an argument. So I'm just going to contaminate here plus range value plus. Okay, now we're not actually going to see anything and let me finish the last step. So I've got Eivin stan, she created a new image. I've even put the filter on the new image. But lastly, we actually need to add the image with the filter applied onto this page. So I'm going to add it to a container with the I. D. Of pic container. And I'll actually give my diff an idea of pick container because this is where I am going to append the image. So pick container. And then let me come back to my javascript. And let's append this filter image to that container. So document dot get element by id. So I'm using the get element by id dot method to get my element with an idea of pick container and to this Div I will append child and the child that I'm impending is the filter image and control us to save. And let's go ahead and see this and there you go. So now you see down below I have my image with and I can adjust the CSS filter hue. Right? So, and you can compare it against the original image on the canvas here. Right. So moving on, we can pretty much do the same for the opacity and brightness filters by setting them to be the value of the CSS filter property. And the function which is associated with the on attribute for opacity is called opacity function. So this one here, this is the one that we're going to work up and work with and let's set that up and basically everything remains the same. So, I'm going to declare my function function, opacity or possibly function And this is going to take as an argument opacity value which refers to this value here when I'm adjusting uh the range here. Right, okay. And after this we are going to do pretty much the same as I said. So, filter image, God, S R C is equal to canvas got to data. U r L And I am going to pass in I m g dot SRC as an argument and I m g dot SRC. We're getting this from line number four which is the source of the original image drawn to the canvas and everything here remains the same. So we set the source attribute of the filter image to be the same as the source of the image that we have on the canvas element here Using the two data, URLA method. And now I am going to declare a local variable called range value once again and this is going to be assigned to opacity val plus percent. So we'll use a percentage because the value of the opacity should be in percentage. Okay. And whatever value we get from the input range is passed into this function as opacity val and and this is contaminated with the percent strength and assigned to be the value of range value variable. And once again we're going to use the set attribute dot method to apply a filter property whose value is opacity. So filter image dot set attribute style. And this time around, once again we're doing the same thing. So filter property has a value of opacity and this it takes as an argument string. So we're just going to do this plus arrange value. Right? And then I'm not going to see anything on the page until I append um this filter image to the dom. So that's the last step. And once again a document whoops, Why is this? Um caps. So document dot get element by ID D. And certainly you could have we can declare this somewhere out so that it can be a global variable. And instead of typing it again and again, so you could do that. So pick a container. And I'm going to upend the filter image to my Yes. So control s to safe. And then once again let's try this out. So this time I'm trying capacity and so there you go. When I move it to the left, it becomes transparent as I move it to the right, it becomes opaque. And for the third part we work with the brightness filter and the function associated with the brightness filter is this one here which is called bright brightness function. So in my javascript, once again function, brightness of function. So let's declare that. And let me actually uh cool! So that's better. Okay, so filter image, filter image, God, S R C is equal to canvas to data. You are real method which takes as an argument, the source of the image drawn to the canvas and then once again we want it to actually we also need to pass in and um argument. So we will call this brightness val right? And here will declare a local variable. So let range value is equal to greatness, val plus and out here, I am going to check what the brightness should be specified as. So brightness, it just seems as a number, we don't actually have to do anything. But anyways, let's see, maybe it's in percent, I am not sure. No, it should have that percentage sign. Okay, so let's just let let's let it be like, so for now and then once again the same thing, you could pretty much copy this. This doesn't matter. So I'll just type it out. So filter image dot set attributes and this is going to pass in style and what style are we using? Well, the filter CSS property whose value is going to be brightness and out here we will pass as an argument plus brightness. No, sorry not brightness brow actually range value, that's the one we want. And let's see this. And we do have to append it to the dome so don't forget to do that. So document dot get element by I. D. That's the one and the I. D. Is a pick container. And we are going to use the append child method here and append a filter image and control as to save. So let's try this out. So brightness is not working. That means oh it is working but you can Oh yeah it's working. So a little it's acting a bit weird and I am wondering if this could be because we have not passed in anything here. So let me try with percent. So can coordinating with percent. Maybe brightness is supposed to be specified as a percent. And let's try this. Yes. So that indeed was the case. We did have to concatenate it with the percentage sign and out here you can see that when I move it to the left it becomes less bright and as I move it to the right, it's becoming really bright. Okay, so that's all for the functionality in javascript you can re factor the code so that it's not as repetitive. For example, you could uh you know, make this a global variable somewhere document get element by the pink container and then appended to upend the filter image to this and here you can see what what happens is. So as I adjust the filters for each one of these as I moved them, you can see that we're not actually a leering all the three filters instead. Each one is applied individually and there's no memory of the previous estate. And in there's one last thing that we can do and that is that we can adjust adjust the size of the filter image so that it's a bit bigger. And to do that, we'll go to CSS but before we go to CSS. Remember that when we inst and she created this filter image, we gave it an I. D. Of filter pick and we give it an I. D. Just for the sole purpose of going to CSS. So that's in style dot CSS and selecting it here. So silky dash pick. And then I will make the width of the filter pick to be the same as the width of the canvas. Okay. And then we can adjust the height to be auto so that it's not it doesn't have really bad resolution control us to save. Okay, let's try this out and there you go. So now we can, you know, we can move the filters play around with them and as you can see we're not really leering the filters so that's all for this code cast in the next podcast will draw a video to a canvas.