 # Creating canvas fills and gradients

Contents

## Creating canvas fills and gradients

Gradients can be created using the following methods:

• `createLinearGradient(x1, y1, x2, y2)` which creates a linear gradient object, where (x1; y1) is the starting point and (x2; y2) is the ending point of the gradient.
• `createRadialGradient(x1, y1, r1, x2, y2, r2)` which creates a radial (circular) gradient object, where (x1; y1) and r1 are the center and radius of the starting circle, and (x2, y2) and r2 are the center and radius of the ending circle of the gradient.
• `Gradient.addColorStop(offset, color)` which adds color and offset position in the gradient object, whereby the offset is a decimal number between 0 and 1, the starting point and the ending point in the gradient respectively.

Both the `createLinearGradient(x1, y1, x2, y2)` and `createRadialGradient(x1, y1, r1, x2, y2, r2)` return a `CanvasGradient` object which can be manipulated using the `addColorStop(offset, color)` method of the `CanvasGradient` object itself.

Besides accepting plain colors as values, both the `fillStyle` and `strokeStyle` attributes also accept gradient colors in the form of the `CanvasGradient` object.

The first thing to do when creating linear gradient is to creat a `CanvasGradient` object using the `createLinearGradient()` method. In the first example we are going to draw a gradient from the canvas origin in the top left, all the way to the bottom left.

The linear gradient produced is extends perpendicular to the line from the starting to the ending points. So to create a linear gradient going from top to bottom we need to use the top-left (0; 0) and the bottom-left (0; canvas.length) coordinates of the canvas as starting and ending point respectively.

After defining a `CanvasGradient` object we apply color to it using two calls to the `addColorStop()` method of the `CanvasGradient` object.

Now lets create the example code:

``````
var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");

//set the starting gradient color to black

//set the ending gradient color to blue

//assign the gradient to the fillStyle

//create a rectangle filled with the gradient
context.fillRect(0, 0, canvas.width, canvas.height);
`````` Changing the starting color offset to 0.5 in the example above shifts the starting color of the gradient to 0.5 of the canvas height as shown in the following example:

``````var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");

//set the starting gradient color to black

//set the ending gradient color to blue

//assign the gradient to the fillStyle

//create a rectangle filled with the gradient
context.fillRect(0, 0, canvas.width, canvas.height);
`````` ``````var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");

//choose the center points of the gradient
var cX = canvas.width/2;
var cY = canvas.height/2;

context.fillRect(0, 0, canvas.width, canvas.height);
`````` ``````var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");

//set the x and y coordinates of the ball at the center of the canvas
var ball_x = canvas.width/2;
var ball_y = canvas.height/2;

//create linear gradient from the top left to the bottom right

context.fillRect(0,0,canvas.width,canvas.height); 