HTML5 - холст createLinearGradient vertical

Question

Как создать градиент холста, который идет слева направо, а не сверху вниз?

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

Этот вопрос идет сверху вниз, что мне нужно сделать, чтобы изменить это, чтобы идти слева направо?

Answer 1

createLinearGradient(x0, y0, x1, y1) рисует вдоль линии от (x0, y0) до (x1, y1).

Ваша линия в настоящее время идет от (0,0) до (0,150). Другими словами, он идет прямо вниз на 150 пикселей.

Обменивайтесь им этим, который проходит прямо через 150 пикселей.

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