С помощью метода createLinearGradient(x1,y1,x2,y2) можно создать линейный градиент. Параметры x1 и y1 устанавливают координаты начальной, а x2 и y2 конечной точки градиента.
После того, как градиент создан необходимо указать цвета перехода. Это можно сделать с помощью метода addColorStop(точка,цвет).
Например, если нужно создать градиент, который плавно изменяет цвет с черного на белый необходимо установить черный цвет в точке 0 (так условно начальная точка градиента) и белый цвет в точке 1 (конечная точка градиента).
<html>
<body>
<canvas id='draw' width='240' height='200' style='border:1px solid;'></canvas>
<script>
var canvas=document.getElementById("draw")
var x=canvas.getContext("2d");
/* Создаем градиент */
var grad = x.createLinearGradient(0,0,0,150);//начало и конец
/* Добавляем точки цветового перехода */
grad.addColorStop(0.0,'black');
grad.addColorStop(1.0,'white');
/* Устанавливаем получившийся градиент как свойство заливки */
x.fillStyle=grad;
/* Рисуем фигиру, к которой будет применен созданный градиент */
x.fillRect(20,20,200,200);
</script>
</body>
</html>
