 Okay, last week we worked on linear gradient fills. So we were filling up our full canvas. Really we were filling up a rectangle that was the full size of our canvas with multiple colors here. Well, today we're going to do the same thing, but instead of linear, which is straight across. So here we went from the top left to the bottom right. You could also go directly across rather than angle or whatever angle you want. We go up and down as well. Today we're going to work on radial, which is circular fills. So let's go ahead and get started. I'm just going to start modifying last week since it's so similar. So what I'm going to do here is let's get rid of the colors in the middle here. And we'll just go from blue to yellow, across like that. So we have a rectangle here, which we have set to be the same size as our canvas. By the way, this is a series. There should be an annotation on the screen to the playlist. Be sure you watch the previous tutorials before you continue here. Also, I'm assuming that you have the basic knowledge of HTML, basic HTML, and some basic JavaScript at least. I should have said that like 10 tutorials ago. Anyway, and here we're going to instead of do a linear gradient, what we're going to do is we are going to do a radial. So we'll erase linear there. Capital R, this is case sensitive, radial gradient. And with the linear, we just give it two sets of points. The starting point and the end point. So the beginning left and right X and Y, beginning top and left X and Y, and also where we want to go to X and Y. Well, you actually need to give four different numbers for the radial. So what we'll do here is I'll say 200, say 50, say 10, I'll say 250 and 300. Okay. So what are these numbers? Well, the first number, what we're doing basically is we're drawing two imaginary invisible circles. And we're drawing the gradient between the two. So what we're doing here is we're giving the radius of the first circle and then the X and Y. And then we're going to do the same. We're going to give the radius for the second X. I'm sorry, I said that. No, I said that right. And then the X and Y. So let's go ahead and refresh up here. And as you can see, we have a blue circle fading out to a yellow circle. So let's go ahead and change some of these values. And I think I did say that. I can't remember what I just said, but let's change that to 20. And that would be moving the X and Y. So it's X, Y, radius, X, Y, radius. So how far left the center of the first circle is. So if I want to go further over, I can say move it to 300. There we go. And if I want it to be further down, I can move it to 150. And now it's further down. And its radius is 10, which is, as you can see, kind of small. I can make it bigger. I can make it 20. And if I refresh up here, you can see you got a little bit bigger. Let's do, let's go extreme and say 100. Boom. It's really big now. Let's go ahead and set it back to, we'll set it down to 20. I think it was a good number there. Oops. I did 200. There we go. Okay. So now we have the X and Y of that. We have the X and Y of our second circle here. So let's go ahead and set the X to the same. So they're centered. If we want them to be centered together, we just give them the same X and Y. So the center point of both circles is the same. And of course, they don't have to be. If I wanted it to kind of point in a certain direction, I can change, let's say, I'll change this to 250 instead of 150. You can see it starts to move that circle down further. Kind of giving it the feel like, kind of like it's pointing down. Let's go ahead and change that to 400. I think might be a good number. Let's see how that looks. There we go. So now it's kind of pointing down. Actually, now it's almost looking like it's a ball with some colors there. So that's that. Now I do want to point out that you don't want the... Let me set this to 299 and see what happens there. Not much of a difference. Let's set this to 250. There we go. If you start making the radius of the second circle smaller than what I have found, smaller than the X or the Y of the first circle, you start getting this cutoff. I don't really know. I haven't read anything about that. I've just discovered that from playing around myself. But you definitely don't want that to happen. So let's say I set this to 100 and this to 350 and we refresh. Because it doesn't happen that way. I have found myself and I can't really explain this because I haven't seen anything talking about it online. It's just something I discover playing around with this. If you put the radius of the second circle lower than the X of the first circle, it kind of screws up the picture. Keep that in mind. Now of course we can also... Let's go ahead and line some of this back up. Let's put this down to 200. This at, let's say 50 for that. We'll do the same thing, 50 here. We'll do this at 50. And we'll do... Let's just do like that. So we have kind of a... It's kind of like a sun only reversed coming out of there. We can again add more color stops. So we can say blue, red, blue. Try to think of colors I haven't used. I'll just say green. And of course these values as I said in the last tutorial are anywhere from 0 to 1. Depending on where you want to position based on what we have set up here. So let's go ahead and set this to 0.2 and this to 0.4. And when we refresh now we have... It goes from blue to red to blue and then out to green. And the second blue is 0.4 ways across our total span of our fill. So that'd be 40%. This would be 80%. So you can see it's a little bit further there. And that's also based on the size of our circles as well, unlike our linear which was the entire size of our rectangle. Well, I hope I explained that well. I tried my best. And of course you can always come to our RC channel. I'll try my best to help you again. I am learning HTML5 canvas myself when I'm teaching the tutorials. I'm really only a few steps ahead of where I'm teaching. So hopefully I'm explaining things well. I think there are some benefits of that since I'm learning. It's kind of fresh in my head. And maybe I explain things to someone better than someone who has it mastered. In some cases, in some cases I can say things inaccurately. Also it helps me learn to teach you. So once again thank you for watching. Please visit FilmsByChris.com. That's Chris of the K. And I hope that you have a great day. There should be a link in the description to my website. Again, have a great day.