Как и при помощи CSS, вы также можете создавать градиенты при помощи HTML5 Canvas. Было бы удивительно, если бы такой возможности не было, ведь эта технология столь востребована. Даже несмотря на повсеместное распространение плоского дизайна, всем нам нравится возможность применять незначительные градиенты. Однако если говорить про CSS, то там довольно сложно овладеть техникой их разработки, и именно поэтому сегодня мы хотим рассказать вам о том, как можно сделать это при помощи HTML5 Canvas.Градиенты можно использовать для заполнения большинства типов фигур вроде прямоугольников, окружностей, линий, текста и так далее. Фигуры на canvas не ограничиваются единым цветом (слава Богу!). Мы считаем, что это довольно интересная техника, которую можно применять к линиям, даже несмотря на то, что на ее внедрение разработчикам в Adobe Illustrator понадобилась целая вечность. Как в случае с Photoshop или Illustrator, здесь представлено 2 типа градиентов.createLinearGradient(x,y,x1,y1) – позволяет создавать линейные градиентыcreateRadialGradient(x,y,r,x1,y1,r1) — позволяет создавать радиальные градиенты
Создаем собственную фигуру, и заполняем ее цветом
Как только у нас появляется готовая форма, нам нужно будет добавить две или более точек перехода цвета. Этот процесс напоминает Photoshop или Illustrator, где задается сначала первое значение цвета градиента, а потом устанавливаются точки переходов или окончания. В Photoshop и Illustrator указывается переход между двумя значения, в то время как вы устанавливаете 2 основных цвета, которые смешиваются между собой. Примерно то же самое можно видеть и в случае с HTML5 Canvas, только здесь вы устанавливаете значения цветов при помощи javascript.Метод addColorStop() определяет точку перехода цвета и ее расположение в градиенте. Позиции градиента могут указываться в промежутке между 0 и 1.Чтобы использовать градиент, вам нужно воспользоваться свойствами fillStyle или strokeStyle, а затем прорисовать форму в виде прямоугольника, окружности, текста или линии.
Градиенты на HTML5 Canvas: линейные
Создайте линейный градиент. Заполните прямоугольник этим градиентом:
Your browser does not support the HTML5 canvas tag.
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"green");
grd.addColorStop(1,"blue");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
Результат:
Как и в случае с Photoshop и Illustrator, в вашем градиенте может быть более 2 цветов. Придерживаясь нашего примера, если вы добавите grd.addColorStop(.4,»red»); между 2 существующими градиентами в javascript, то получите нижеприведенный результат. 
Градиенты на HTML5 Canvas: радиальные
Создайте радиальный или круглый градиент. Заполните прямоугольник этим градиентом:
Your browser does not support the HTML5 canvas tag.
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(.0,"green");
grd.addColorStop(1,"blue");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
Результат:
Изменение значения зеленого перехода с 0 до .5 сделает переход более резким. 
В завершение
Градиенты на HTML5 Canvas работают по тому же принципу, что и в Photoshop или Illustrator, только здесь вы используете javascript вместо слайдеров. Изучение того, как различные аспекты javascript влияют на результат помогут вам лучше ориентироваться в настройках и создавать более точные и подходящие градиенты.