Cómo hacer un generador de degradados en HTML5 - Canvas

En este tutorial revisaremos el uso de gradientes en canvas e iremos más allá creando una aplicación sencilla para generar  degradados utilizando HTML5 y JavaScript.

Revisemos de manera general como crear gradientes.

Gradientes Lineales

Para crear gradientes lineales se usa el método createLinearGradient(x1, y1, x2, y2), los parámetros representan las coordenadas de la dirección en que se creará el degradado.

Los colores que se usaran en el degradado se agregan con addColorStop(color).

Gradiente Horizontal.

var degradado = context.createLinearGradient(0,0,200, 0);
degradado.addColorStop(0, colorAleatorio());
degradado.addColorStop(0.5, colorAleatorio());
degradado.addColorStop(1, colorAleatorio());
context.fillStyle = degradado;
context.fillRect(0, 0, 200, 200);
context.strokeRect(0, 0, 200, 200);

Una vez creado el degradado podemos usarlo como relleno para cualquier figura.

Gradiente Vertical.

Para crear un degradado vertical sólo tenemos que cambiar los valores de las coordenadas del ejemplo anterior pero en vez de usar un valor mayor a 0 para x final los usamos en y final.

var degradado = context.createLinearGradient(0,0,0,200);

Gradiente Diagonal.

Para que el degradado sea de forma diagonal cambiamos ambos coordenadas, en en el siguiente ejemplo cambiamos las coordenadas x e y finales.

var degradado = context.createLinearGradient(0,0,200,200);

Gradientes Radiales

Para crear gradientes radiales seguimos un proceso similar a la forma de crear gradientes lineales, solo variando en el método y parámetros para crear el gradiente.

var degradado = context.createRadialGradient(100,100,25,100,100,100);

Los seis parámetros se usan para definir el punto central y los radios de dos círculos. El primer círculo es el círculo "inicio", y el segundo círculo es el círculo "final".

Ejemplo Final.

See the Pen Generador de Gradientes by Jesus Tepec (@JesusTepec) on CodePen.