 In this post, I’m going to look at linear and radial gradients and the methods required to apply them as a fill to various different shapes within a Canvas. Gradients are very versatile; they can include multiple colour stops and be positioned within a shape.

A linear gradient is where a colour is gradually faded into another colour along a straight path.

### Two colour black to white linear gradient

The easiest way to see how a linear gradient works on a Canvas is to just use two colours to start with. Here I’m going to be creating a linear gradient which goes from black to white, filling a simple rectangle shape. View demo

#### The markup

First I create the gradient before I instruct a shape to be filled with it. To create the gradient, a variable is created called linearGradient, which calls the context `createLinearGradient` together with a string of parameters, which mean as follows:

In my example, the gradient start X value is set to the width of the Canvas (200px) so the gradient spans it horizontally, and the start Y position is set to 0 to it begins at the top. The end values are then set to 200 (X) and 200 (Y), so the gradient runs straight down and fills the Canvas vertically by 200px.

Next, I add the colour stops. As I want to create a two-colour gradient, I add two colour stops; one for black and one for white. The number before the colour declaration indicates where that colour starts in the shape it is applied to; the minimum value is 0 and the maximum value is 1. In my example, white starts at the min 0 value (the top of the Canvas), and black is at the max 1 value (the bottom of the Canvas), and all space between is where the two colours blend together. Colour stops can occur at any values in between 0 and 1, for example, 0.25, 0.5, etc.

Lastly, we set the `fillStyle` context to the variable `linearGradient` we created before and then draw our shape (in my case, a rectangle) which will be filled with the gradient we just created.

##### Javascript portion
```function draw() {
if (canvas.getContext){
var ctx = canvas.getContext("2d");

ctx.fillRect (0, 0, 200, 200);
}
}
```
##### HTML portion
```<body onLoad="draw();">
</body>
```

Linear gradients can be created with more colours by simply adding more colour stops. I’m going to add some prettier colours to this next example to make it slightly more interesting, as well. View demo

#### The markup

As mentioned before, I just add more colour stops. In my example I have added colour stops in various shades of pink and orange.

##### Javascript portion
```function draw() {
if (canvas.getContext){
var ctx = canvas.getContext("2d");

ctx.fillRect (0, 0, 200, 200);
}
}
```
##### HTML portion
```<body onLoad="draw();">
</body>
```

### Linear gradient applied to a shape outline

Gradients can also be applied to strokes around shapes. In my next example, I’ll apply the stroke to my rectangle. View demo

#### The markup

The gradient is created in the same way as the previous example, but instead on instructing the shape to be filled with it, I instruct the stroke to be filled with it instead by using the context of `strokeStyle` and applying the variable of `linearGradient` to it.

##### Javascript portion
```function draw() {
if (canvas.getContext){
var ctx = canvas.getContext("2d");

ctx.lineWidth = 10;

ctx.strokeRect (0, 0, 200, 200);
}
}
```
##### HTML portion
```<body onLoad="draw();">
</body>
```

A radial gradient is where a colour is gradually faded into another colour from a central to an outer point. Radial gradients are especially useful for creating effects on spherical 2D shapes, to give them the appearance of having depth.

In this example, I have created a two-colour radial gradient using black and white and applied it to the rectangle shape. View demo

#### The markup

To create a radial gradient, we create a variable called `radialGradient`, which calls the context `createRadialGradient` together with a longer string of parameters than what we used for the linear gradients. These mean as follows:

In my example, the start and end positions are the same so the gradient radiates around one point, and the end radius is 140 pixels bigger than the start radius. Together, all these values create a radial gradient which radiates out from the central point from white to black (as the X/Y values have been set to the centre of the Canvas).

##### Javascript portion
```function draw() {
if (canvas.getContext){
var ctx = canvas.getContext("2d");

ctx.fillRect (0, 0, 200, 200);
}
}
```
##### HTML portion
```<body onLoad="draw();">
</body>
```

This example is very similar to the gradient above; the only difference is that it has been applied to a circle shape instead of a rectangle, and the position of the start and end points has been changed slightly to make it look like the shine on a sphere. View demo

#### The markup

##### Javascript portion
```function draw() {
if (canvas.getContext){
var ctx = canvas.getContext("2d");

var x = 100;
var y = 100;
var startAngle = 0;
var endAngle = Math.PI*2;
var antiClockwise = false;

ctx.beginPath();
ctx.closePath();

ctx.fill();
}
}
```
##### HTML portion
```<body onLoad="draw();">
</body>
```

This last example is exactly the same as the one above; the only difference is that more colour stops have been added in various shades of pink to give the appearance of a pink sphere. View demo

#### The markup

##### Javascript portion
```function draw() {
if (canvas.getContext){
var ctx = canvas.getContext("2d");

var x = 100;
var y = 100;
var startAngle = 0;
var endAngle = Math.PI*2;
var antiClockwise = false;

ctx.beginPath();
```<body onLoad="draw();">