Совпадение x-координат начальной и конечной точек создает горизонтальный градиент:

gradient = context.createLinearGradient(50, 30, 50, 150);

А совпадение y-координат начальной и конечной точек создает горизонтальный градиент:

gradient = context.createLinearGradient(50, 30, 150, 30);

Радиальный градиент создается с помощью метода

createRadialGradient(x0, y0, r0, x1, y1, r1),