 Okay, we've been moving right along with our HTML5 Canvas tutorials. Today we're going to be looking at different types of fills. So far we've been filling with solid colors, but today we're going to be working with gradient fills. So that's where it fades from one color to another, or more than one color. But let's go ahead and get started. I'm using Vim as my text editor. That's my preference. Use whatever text editor you prefer. Also I want to just give recognition to HTML5CanvasTutorials.com. Not getting any money from them, not getting any kickbacks from them. That's where I've learned most of my Canvas stuff, and I want to give credit there, because I'm basically reading off my notes that I took when I went through their tutorials. So my tutorials are similar to theirs. But here we go. So this is a series. If you have not watched the previous videos in this series, you may want to check that out. There should be an annotation on the screen for that. So I got my browser up here. I got my editor down here at the basic HTML, and now what we're going to do is we want to, we're going to fill in the entire Canvas. So let me real quick make this full screen. I'll hit F12 to bring up my, in Chrome, my little console tools here. I'm going to go Elements, sorry, I almost sneezed. I'm going to click the magnifying glass here and go right there. You can see this is our Canvas. It's 600 pixels by 300 pixels. So you can see that clearly there. F12 to close that, I'm going to show you. You can see that that's what we have it set to here, but I wanted to point that out so you can see where we're going to fill in our gradient colors. So now that we've got our Canvas and our context here, we're going to draw a rectangle that's the entire size of the Canvas, and that's what we're going to fill. So I'm going to say context.rect for rectangle, and then we're going to give a position. We want to start in the top left of our Canvas, so 0 comma 0, so 0 pixels over, 0 pixels down. Now we want to draw the box over, and we want to fill up our entire Canvas, so we could put in 600 comma 300, but then if we change the size of our Canvas, we'd have to go back and change that. So what we're going to do is we're going to use canvas.width and canvas.height. So again, you can put in the numbers manually, but it's always a good practice to check the value of stuff and use variables when you can, just in case, thing you decide to resize your canvas later. You don't have to go and change it in multiple places in your code. So there we've created a rectangle, and now we're not actually going to draw the rectangle, but that rectangle is actually there now. We're not going to call the stroke option, which we have in the past. The stroke method will draw it, but even if we don't draw it, it's there at this point. But what we are going to do is we're going to create, well, here let me show you context.fillStyle, and this is case sensitive. Style will say equals, and I'll say blue, and it will say context.fill. So now that we have that, I'll save it. And although we didn't stroke our rectangle, which is drawing the outer edge of the rectangle, we did fill it. At five up here, you can see that we have now filled our rectangle with blue, but we want it to be gradient. Go from, in this case, we'll probably go from red to blue. So let's go ahead and work on that. So we're going to say var, and we're going to create a variable called grd for gradient. Now I'm going to say context.create linear gradient. Now we're going to create the gradient. We want it to go the entire size of our rectangle, which is the entire size of our canvas. So just like before, we're going to say start at 0 comma 0, and go to the canvas.width. Now if you don't want it to go with the entire width and height, maybe you want it to only go halfway. You can do that as well. In fact, we'll play with that here in a moment, comma canvas.height. So we've created that. Now we've got to tell it what colors we want. So we're going to now say take that object we just created, the grd for gradient, and we're going to add a color stop. Now the color stops are the different points, the different colors you want, and you want to tell it from its entire distance where you want to stop for each color, and also what colors you want it to be. And the value for the spacing is 0 through 1. So if you want it to go the entire width, the one of your colors will have to be at 0, and the other one will be at 1. So we'll say 0, and I'll say blue. Then I'm going to say gradient, add, color, stop, and we'll go the entire distance of our object. We'll say 1, comma, and we'll say red here. Now we need to change our fill style from blue. We're going to get rid of the quotations as well and use that variable we created, we saved that, we hit F5, we now have a gradient that goes from the top left corner to the bottom right corner, so it's kind of an angle right there, fading from one color to another. So obviously we can change these. I can also put in, I don't know, yellow if I wanted, or really any value for different colors. But I do like the look of the red and blue. There we go. As I was saying here, we're going from the top left corner to the bottom right corner. If we want to stop halfway, we can also say the width divided by 2 and the height divided by 2. That should work. There we go. So the blue is starting here, and before the red was starting here and we're meeting halfway. Well now we have the blue here and the red here, and then it's fading halfway. So everything past the center point, or this way going down and to the right, is going to be 100% red. So that's how you can divide that up. Let's put it back to the full length. There we go. So now we have 100% blue, top left, 100% red, bottom right, and fading from one to another through the middle there. And we can also do different colors. So let's add a few different lines here. I'm just going to copy and paste to save some time. And as I said, these values for the stops are from 0 to 1. Kind of like 0 to 100. We're just using decimals. Think of it that way if it's easier for you. I'm going to say 0.3 of the way and 0.6 of the way. So kind of in thirds here. We're going to go, we'll say that one's red. Well, we'll just go red, blue, red, blue. How about that? So there we go. We got our different stopping points here. Red, blue, red, blue. So we're dividing it up different ways there. And of course you could do different colors if I wanted to go yellow there. I could. And we have yellow over there. You could also do, oh, I didn't mean to. I meant to change this one. We'll say green. So now we got blue, red, green, and yellow. The red is more sharp of a fade there just because blue and red are on opposite sides of the spectrum there where green and yellow are close to each other. So the fade isn't as sharp. If that makes sense, if you know anything about color mixing. Okay. So now we've done this. We could also use this. Well, we are using this in an object. We're doing a rectangle. But if you have other objects, you can fill them the same way. So what I'm going to do is I'm going to copy this, save an X out of that. And I'm going to go, if you remember our last tutorial we did on line joints. We created this object. Let's see if I can go back. There we go. Then we filled with blue. Well, we can also add in. So I'm going to copy and paste my indentations a little different here. Let's fix that just so everything looks nice. In fact, I'm going to delete that line and that line. So here we got our gradient that we're creating up there. We're giving it values. And then we're drawing our path and filling it. And down here I should be able to do this and hit F5 up here. It looks red because we're still drawing the full length of the canvas. And this just happens to fall in the reds area. We can change either the location that our gradient starts and ends up here. So I can say 100 there. And I can say the width, I'll say, I'll just do half the canvas. So now you can see more of the colors. I could also change where they stop and start and put them a little closer together. So I can say blue will start at 0.2. Green will be at 0.4. There we go. We're getting a little bit more of the colors. But you can gradiently fill any path object that you have closed. Well, actually, as I've shown in a pre-story, you don't have to close them either. But anything that you can fill, you can fill with a gradient. So to fill the entire background of the canvas, we just used a rectangle that we didn't draw to be the entire size of the canvas. Also, we could have probably, down here, we are using stroke to stroke the object. That sounds so wrong. We can comment that out. If I refresh this, you can see the fill is still there. We're just never drawing. The object is still there. It's just never drawn because we never call the stroke method. But that's it for this tutorial. Next time we're going to look at these were linear gradients. Next time we're going to look at radial, which instead of being straight across, we're going to have circular gradients. So that's what we're going to do next week. I hope that you join me. Hope you're enjoying these tutorials. I know that they're pretty basic at this point. But as we move along, we'll get more and more advanced. Thank you for watching. Please visit filmsbychrist.com. That's Chris at the K. There should be a link in the description. Also, if you go to my site, there should be a link to my Pastebin account. Also, you can go to Pastebin. My username is MetalX1000. I think you should be able to look me up there. And pretty much all these scripts are going to be saved on my account there. So you can look at them there if you want. But I recommend typing stuff out. It'll help you learn better. Anyway, as always, I hope that you have a great day.