HTML5 - canva createLinearGradient vertical

Question

Hi,

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?

Thanks,
Tee

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 its going straight-down 150 pixels.

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

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