Creating canvas fills and gradients

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.

createLinearGradient(x1, y1, x2, y2)

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");

//create the linear gradient object
var gradient = context.createLinearGradient(0, 0, 0, canvas.height);

//set the starting gradient color to black
gradient.addColorStop(0, "rgb(0, 0, 0)");

//set the ending gradient color to blue
gradient.addColorStop(1, "rgb(0, 0, 255)");

//assign the gradient to the fillStyle
context.fillStyle = gradient;

//create a rectangle filled with the gradient
context.fillRect(0, 0, canvas.width, canvas.height);

Canvas gradient



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");

//create the linear gradient object
var gradient = context.createLinearGradient(0, 0, 0, canvas.height);

//set the starting gradient color to black
gradient.addColorStop(0.5, "rgb(0, 0, 0)");

//set the ending gradient color to blue
gradient.addColorStop(1, "rgb(0, 0, 255)");

//assign the gradient to the fillStyle
context.fillStyle = gradient;

//create a rectangle filled with the gradient
context.fillRect(0, 0, canvas.width, canvas.height);

Canvas linear gradient



createRadialGradient(x1, y1, r1, x2, y2, r2)

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;

//create the radial gradient object
var gradient = context.createRadialGradient(cX, cY, 0,cX, cY, 250);

//add colors to the gradient object
gradient.addColorStop(0, "rgb(250, 150, 50)"); 
gradient.addColorStop(1, "rgb(50, 50, 250)");

context.fillStyle = gradient; 
context.fillRect(0, 0, canvas.width, canvas.height); 

Canvas radial gradient


Example using both linear and radial gradients

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
gradient = context.createLinearGradient(0,0,canvas.width,canvas.height);

//set gradient color start
gradient.addColorStop(0,'#230387');

//set gradient color end
gradient.addColorStop(1,'#870323');

//use the gradient as fillstyle
context.fillStyle = gradient;
context.fillRect(0,0,canvas.width,canvas.height);

//create ball gradient color
gradient1 = context.createRadialGradient(ball_x,ball_y,7, ball_x,ball_y,50);
gradient1.addColorStop(0,'#ffffff');
gradient1.addColorStop(1,'#0fff0f');

context.fillStyle = gradient1;

//draw the ball of radius 50 at the center of the canvas
context.arc(ball_x,ball_y,50,0,2*Math.PI,true);
context.fill();

Canvas gradient