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
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
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.