createLinearGradient

The createLinearGradient(x0, y0, x1, y1) method takes four arguments that represent the start point (x0, y0) and end point (x1, y1) of the gradient.

example:

function drawLinearGradien(context){

 var gradient;
 gradient = context.createLinearGradient(0, 50, 0, 250);
 gradient.addColorStop(0,"blue"); 
 gradient.addColorStop(1,"white");
 context.fillStyle = gradient;
 context.fillRect(50,50,250,200);

 gradient = context.createLinearGradient(350, 0, 600, 0);
 gradient.addColorStop(0,"red"); 
 gradient.addColorStop(1,"white");
 context.fillStyle = gradient;
 context.fillRect(350,50,250,200);
}