Gradient Fills on the HTML5 Canvas

[00:00] Now let's cover gradient fills. A gradient fill allows you to fill a path with multiple colors that blend smoothly from one to the next. You can create a linear gradient in which the colors change from one to other along the length of a line between two points or a radial gradient which starts at a given radius from a center point and extends to a second radius around the same or another center point.

[00:22] That one is a bit complex to describe but should become clearer when we code it up. To use either of these gradients, you follow the same procedure. First you create the gradient using either context to create linear gradient or context to create radial gradient. This sets up the physical size and shape of the gradient.

[00:43] Then you specify the colors to use in the gradient with multiple calls to gradient.addcolorstop. Finally you tell the context to use that gradient as the fillstyle by saying, "context fillstyle equals gradient." Of course then you draw a shape with a fill to see the results. Let's try it out with a linear gradient.

[01:06] First call create linear gradient. The first point will be 100 100. The second point will be 100 200. This creates a vertical line. Then call addcolorstop to add the first color. This method takes a color and a position value from zero to one. This position parameter specifies where on the gradient this color will fall.

[01:30] Zero will coincide with the first point defined on the gradient. One will coincide with the second point. values beyond this range are not valid. This first color will be red and will start at the first point, 100 100. I'll add another color stop making it blue and setting its position to one.

[01:50] Now we have a workable gradient. We can assign this to the context fillstyle. Then I'll simply call fillrect making a 100 pixel square starting at 100 100. There's your gradient. We can add another color stop, say green, at 05.

[02:13] You can see this green bar in the middle. Change the value to 025 and notice that the green is nearer the top. Or change it to 075 and notice that it's closer to the bottom. You can add as many color stops as you want to make some very complex gradients.

[02:31] We can also change the direction of the gradient by making the second point 200 100. This creates a horizontal gradient. Or we can make it diagonal by setting the point to 200 200. Now realize that the shape you're drawing does not affect the color gradient at all.

[02:50] If I make this rectangle much larger you can see that the gradient itself does not change. Everything before the first point is red. Everything after the last point is blue. You can consider that the gradient just exists once you create it and by drawing a shape or shapes you're simply revealing parts of the gradient.

[03:12] Now let's look at radial gradients. These are created in very much the same way but with some important differences. The create radial gradient method takes six parameters. This is an X, Y, and radius for the start of the gradient and an X, Y, and radius for the end of the gradient.

[03:31] Although this way of defining a gradient is not immediately intuitive, it winds up being very powerful. I'll wipe out all this linear code and create a new radial gradient. I'll give the first point an X Y of 100 100 and a radius of 0The second point will also be 100 100 with a radius of 50.

[03:54] I'll set two color stops, white at a position of zero which corresponds to the first point and radius and black at position one which corresponds with the second point and radius. I'll set this gradient as the fillstyle of the context. Finally I'll begin a path, draw a circle at that same point also with a 50 pixel radius, and fill it.

[04:24] There's your radial gradient. You can try increasing the first radius and see that you get more white or decrease the second radius and you'll get more black. You can also change the position of either point. I'll move the white point over 20 on X and up 20 on Y. Then I'll move the black point over 10 and up 10. I'll increase the radius of that a bit.

[04:56] Now we have a half decent shaded sphere. Again, notice again that if I increase the radius of the circle being drawn you can see that outside of the final color stop all is black. There's no particular formula that I'm aware of when creating a shaded sphere like this.

[05:11] It's just a matter of tweaking things until it looks right. Of course, this is just a single example of the nearly infinite ways you can use these functions to create gradients.