Duration: 16 minutes
Summary: In this video, we will continue our discussion of canvas. We saw how to create the canvas and its border in the previous video. Today, we will discuss the use of radial and linear gradients. If you have seen the Silverlight videos, you recall that we did some of the gradient displays using Silverlight. But what makes it more interesting in this case is that gradient capabilities are baked into HTML 5. We will start with the radial gradient. We define its parameters and what they mean and we will declare some color stops. We will use that gradient definition as the filling style of the context. Then, we will draw with the gradient fill. After that we will define a linear gradient. We will also define more color stops. Then we will draw a rectangle using the fill style of the gradient just defined.
Technology Used: HTML 5 and Visual Studio 2010
Keyword: HTML 5, Visual Studio 2010, canvas, width, height, document, getElementById, getContext, beginPath, moveTo, lineTo, fill, stroke, createRadialGradient, addColorStop, fillStyle, arc, lineWidth, strokeStyle, rect.
Welcome back, everyone. This is Ayad Boudiab. I'm the Senior .Net Application Developer. This is the second video on the canvas. If you remember on the previous video, for HTML5, we defined what a canvas is, and we created a file. Here, we specified jQuery, using the Google API version. When it's ready, we can get the element on the canvas, get the context, and do some drawing. So, that's what we have so far with the canvas. Let's take that for a second. Then, go down here, and start doing some more work. Now, what else can I do with the canvas? We have the beginning path. That's what we normally do. We take that. That's what we normally do when we start the drawing. Then, we move to some line to points, and maybe we'll try to close a path at this point, and try to fill that with specific color. So, instead of just using the stroke like we did before, let's see how we can use the fill in this case. So, again, begin a path, and then let's move to "context." move to a specific point. I'm going to move to 200, 0, which is halfway along the x-axis.
Then, I'm going to create a line to another point, which is, for example, 300, 100, and another line to, which will be 200, 300. We'll go over that in a second. Then, one more line to. In this case, we'll go to 0, 100. So, we have 300, 100, 200, 300, then 0, 100. Let's close that path. So, "context.closepath." It wraps it up to the starting point. It's been going around in many lines, then when I close the path, it goes from the ending point to the starting point, throughout the whole path, all together. I'm going to give it some color. Let's say, for example, it's a blue. So, "context.fillstyle=blue." I chose the color blue as a fill style. Now, instead of "context.stroke" like we did before, let's do "context.fill." We'll see what that gives us. If I right-click on this, and view it in the browser, I wind up with something like this. So, we said move to 200, 0, line to 300, 100, line to 200, 300, line to 0, 100, then close path. It wraps it up for me. I chose the color blue, then I filled it. So, now, that's the shape that I ended with. So, then, some context will help us through a lot by getting this 2D context, then we start calling them assets. Begin path, move to, stroke, line with, close path, style, fill style, and fill, all these can be done with the context we got on the top here, by getting context off the canvas element that we got by saying "get element by ID."
Now, let's go ahead and proceed with the rest of the functionality. Again, this one, down here. Let's see how we can work with the gradients. So, if you watched the video we did on Silverlight, you've seen how we can do some gradients with that. But, now, it's all in HTML5, which helps us a lot. We don't have to use Silverlight to do that. We can do all this using the context methods. So, I'm going to define a gradient, then I'm going to use that gradient as the fill style. Here, the fill style was blue. I specified a color and said I wanted it to be blue.
Well, in the next one, I"m going to specify the fill style to be something else. It will be a gradient. So, let's start backwards. Let's start by specifying the actual arc I want to draw, then, I'm going to go back to the gradient. Let's go with "context.beginpath()." Like we've done before. Then, I'm going to draw an arc. "Context.arc()." I can draw circles or arcs by specifying different parameters. Which are as follows. First is the center of the arc. I specify it to be 0. That's the X-value of the center. The next would be the Y-value, 0. So, I'm specifying that to start at 0, 0, which is the top left corner of the canvas.
I want to specify a radius for this arc. The radius is going to be 300. I'm going to specify the starting angle, which is 0. I need to specify the ending angle, where I'd end up. In this case the ending angle is "math.PI." That's going to give us the PI value, times 2, which is 2PI. So, if I go with a full circle, that's 2PI. So, in this case the ending angle, specified in the negative value would be "math.PI*2." That's the ending angle. The last parameter asks if you want it counterclockwise. I'm going to say "False" in this case. Let's go over them one more time. This is the center x of the arc, this is the center y of the arc, starting at 0, 0. I want the radius to be 300. I want the starting angle to be 0. I want the ending angle to be 2?. So, let's say I'm at this point over here. I'm going to go back around and fill up that full circle. Here's the circle. I'm starting at 0, 0, and I'm going around that -2?, back to the starting point. But, in this case, since I'm going to be marking part of that arc, you'll see the results when I'm done. This will draw me an arc on the screen. This wraps up the arc call.
Now, I want to specify the line width. So, "context.lindwidth=5." That's how thick I want the line to be. The stroke style for this is "context.strokestyle." The stroke is from the outside. The fill is from the inside. The stroke is the outside corner. The edge of it. I want to specify if to be black. So, "strokestyle," I'm going to make that black. Then, I'm going to do "context.fill." Now, will this give me anything? Let's view that in the browser. Here's the circle. It's going from 0. But, it's going around for -2?, but that's the only thing we see. It's a big circle. It stops here. But, actually, it circles around back, and comes this way. We don't see it. That's the only part we see as part of the arc. So, let's fill this with some gradient. Right now it's black, so let's fill it with some gradient. Let's go back before "beginpath." Let's specify the gradients we're interested in. Let's do that. Let's define a variable. G, for the gradient. "G=context.createradialgradient." That's what I'm interested in right now. There are lineal and radial gradients. The linear gradient is something I'll discuss in a moment.
The radial gradient is what I'm discussing right now. So, "createradialgradient." That's the call I'm going to make. What are the parameters? The first is the x coordinate of the start of the gradient. Make that 0. The second is the y coordinate of the start of the gradient, 0. Again, I'm starting at 0, 0. What's the radius of that circle? 0. It's like a starting point. Then, what's the x-coordinate of the end of the gradient? Add 300. I want that to match the 300 I declared for the arc. Then, I will specify the y coordinate of the end of the gradient. This will also be 300. Then, the radius of the ending circle is 300. OK, close that. Again the parameters, 0 is the x coordinate of the start gradient, the y coordinate of the start gradient, the radius of the circle, of the x coordinate of the ending gradient, the y coordinate of the ending gradient, and the radius of the ending circle.
This is the gradient we just defined. This gradient has some stopping colors. Because, when you specify your gradient, you can stop at different values. The starting point is 0. The ending point is 1. You can stop at any of those values. You can say blue, then 0.2, or green, then 0.5, violet at 0.7, and then black until 1.0. So, you can make any of those stops. You can put as many as you want. In this case, I'm going to have three stops. G.addcolorstop. I want to add a color stop at 0, and I want this one to be red. Now, g.addcolorstop. I want to stop at 0.5, and I need this color to be green. I'm going to add one more, and I want this to stop at 1, and I want it to be blue. That's the color stop. What we defined here is a radial gradient with the following parameters, and we have color stops at three different values. I have a line here. This, in here, is 0. This is 1. You can specify as many breaks as you want. I want the break over here, at 0.25, at 0.5, at 0.75, and at 1. You specify a color at every one of those breaking points. In this case, we've specified one at zero to be red, one at .5 to be green, and one at 1 to be blue. How can I get this gradient to hook up to my drawing? One more line. We do this by specifying the fill style. Instead of a pure color like black, green, or blue, I want the fill style to be "G" that I just defined. This is the fill style for this specific context.
We defined the context, we hooked that up to the fill style, we began the path, we drew an arc, we specified the parameters for that arc, and we filled with whatever fill style we chose. We chose "G." Let's go ahead and view that in the browser. Here are the gradient colors we specified. Remember, we went with red, green, and blue. See those three values, where they're showing as gradients on the screen? That's how this createradialgradient actually works.
Now, let's see how we can do this with a linear gradient fill style. We can copy some of those values. Then, we can specify a linear gradient. Let's take this, and comment it out. Let's go down to the next line and specify a linear gradient. "var G=context.createlineargradient." In this case, the linear gradient is simple. I can specify something at the starting point, and how wide, and how high you want it to be. I'm staring at 0, 200. This is the starting and stopping point for this linear gradient. So, we specify the gradient coordinates, then add color stops like we did before. They're the same format as the ones we specified for the radial gradient. Let's add some colors. At 0, I'm going to choose yellow. At .25, I'm going to choose violet. At .5, I'm going to choose green. At 1, I'm going to choose white. These are the color stops for this specific gradient. We specified the gradient and color stops. Now, we need to do the context, begin the paths, and do some drawing. "Context.beginpath." Now, "context.rectangle." I'm going to draw a rectangle. This has the starting point, width, and height. So, 10, 50. That's the starting point. Width is 200. Height may be 90, or something like that. This is a rectangle that I just specified. Again, don't forget to hook the filling style for the context. The fill style would be equal to "G" that I declared earlier. This linear gradient will be the fill style for the specific rectangle. "Context.fill" to fill the rectangle. Then, "context.linewidth" if I want to specify the line width to be 5 for this context. Then, I'm going to specify "context.strokestyle," which is the outside of the shape. Stroke style, not fill style. I'm going to choose black for this. Then, "context.stroke," because we already did a fill for the top out, so now we'll do a stroke for the outer one. This one will fill with the fill style I just chose. When I change those parameters for stroke, it's the stroke style that I just specified. Let's go ahead and save, and view that in the browser.
Here's a linear gradient. It's not going sideways, just linear. The yellow, green, violet, and white that we specified, going from left to right. You see the border stroked for that rectangle. You see the 10, 50 starting point, and the width and height of 200 and 90. Then, that linear gradient that we just defined.
So, in this video we learned about working with radial and linear gradients, and how we can define those in HTML5. Thank you, very much, for listening. I'm Ayad Boudiab. Take care.