HTML5 - canvas createLinearGradient horizontal

Question

How can I create a canvas gradient that goes from left to right as opposed to top to down?

var lingrad = ctx.createLinearGradient(0,0,0,150);
 lingrad.addColorStop(0, '#00ABEB');
 lingrad.addColorStop(0.5, '#fff');
 lingrad.addColorStop(0.5, '#66CC00');
 lingrad.addColorStop(1, '#fff');

 ctx.fillStyle = lingrad;
 ctx.fillRect(10,10,780,130);

That one goes from top to down, what do I need to do to change that to go from left to right?

Answer 1

createLinearGradient(x0, y0, x1, y1) paints along a line from (x0, y0) to (x1, y1).

Your line is currently going from (0,0) to (0,150). In other words it's going straight-down 150 pixels.

Exchange it with this, which goes straight-across 150 pixels.

var lingrad = ctx.createLinearGradient(0,0,150,0);