HTML5 - canvas createLinearGradient vertical

Question

¿Cómo puedo crear un degradado de lienzo que vaya de izquierda a derecha y no de arriba a abajo?

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

Eso va de arriba a abajo, ¿qué tengo que hacer para cambiar eso para ir de izquierda a derecha?

Answer 1

createLinearGradient(x0, y0, x1, y1) pinta a lo largo de una línea de (x0, y0) a (x1, y1).

Su línea va actualmente de (0,0) a (0,150). En otras palabras, va directamente hacia abajo 150 píxeles.

Intercambiar con esto, que va directamente a través de 150 píxeles.

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