Degradado en canvas HTML: createLinearGradient, radial y cónico

Un degradado en canvas HTML se hace en tres pasos: crea un objeto de degradado con ctx.createLinearGradient(), createRadialGradient() o createConicGradient(), añade colores con addColorStop(offset, colour) y asígnalo a ctx.fillStyle antes de dibujar. A diferencia de CSS, un degradado de canvas se define con puntos en píxeles, así que le dices exactamente dónde empieza y dónde acaba el color. Todo lo que pintes con ese relleno toma la parte del degradado que tiene debajo.

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')

const g = ctx.createLinearGradient(0, 0, canvas.width, canvas.height)
g.addColorStop(0, '#1e1b4b')
g.addColorStop(0.55, '#7c3aed')
g.addColorStop(1, '#f472b6')

ctx.fillStyle = g
ctx.fillRect(0, 0, canvas.width, canvas.height)

Los tres métodos de degradado

El degradado está fijado al canvas, no a la forma. Si creas un degradado de 0 a 400 y luego rellenas un cuadrado pequeño en x 300, el cuadrado solo muestra el extremo rosa. Eso sorprende a quien viene de CSS, donde un degradado siempre se estira al elemento. Crea el degradado con las coordenadas de la propia forma cuando quieras que encaje.

createLinearGradient y los ángulos de CSS

CSS te deja escribir 135deg. Canvas quiere dos puntos. Esta función convierte un ángulo CSS en los mismos puntos de inicio y fin que usa CSS, así que un diseño escrito como degradado lineal en CSS se dibuja idéntico en canvas.

// Match CSS linear-gradient(angle) on a w by h rectangle
function cssAngleGradient(ctx, angleDeg, x, y, w, h) {
  const a = (angleDeg * Math.PI) / 180
  const len = Math.abs(w * Math.sin(a)) + Math.abs(h * Math.cos(a))
  const cx = x + w / 2
  const cy = y + h / 2
  const dx = (Math.sin(a) * len) / 2
  const dy = (-Math.cos(a) * len) / 2
  return ctx.createLinearGradient(cx - dx, cy - dy, cx + dx, cy + dy)
}

const g = cssAngleGradient(ctx, 135, 0, 0, 1200, 630)
g.addColorStop(0, '#0f172a')
g.addColorStop(1, '#0d9488')
ctx.fillStyle = g
ctx.fillRect(0, 0, 1200, 630)

createRadialGradient

Un degradado radial en canvas se define con dos círculos: uno inicial y uno final. La parada de color 0 está en el primer círculo y la parada 1 en el segundo. Casi siempre querrás que el primer círculo sea un punto, así que su radio es 0.

const w = canvas.width
const h = canvas.height

// A soft light in the top right corner of a dark ground
ctx.fillStyle = '#0c0a1d'
ctx.fillRect(0, 0, w, h)

const glow = ctx.createRadialGradient(w * 0.75, h * 0.2, 0, w * 0.75, h * 0.2, w * 0.6)
glow.addColorStop(0, 'rgb(124 58 237 / 0.9)')
glow.addColorStop(0.5, 'rgb(46 16 101 / 0.5)')
glow.addColorStop(1, 'rgb(12 10 29 / 0)')

ctx.fillStyle = glow
ctx.fillRect(0, 0, w, h)

Aleja el centro del primer círculo del segundo y la luz se inclina, como un foco que da en una pared en ángulo. CSS no tiene un equivalente directo de ese desplazamiento. Para la parte de CSS, mira degradados radiales en CSS.

createConicGradient

createConicGradient(startAngle, x, y) hace girar el color alrededor de un punto central. Hay dos diferencias con CSS: el ángulo va en radianes, y 0 apunta a la derecha (las tres en punto), no hacia arriba. Para igualar un conic-gradient(from 0deg, ...) de CSS, empieza en -Math.PI / 2.

const cx = canvas.width / 2
const cy = canvas.height / 2

const ring = ctx.createConicGradient(-Math.PI / 2, cx, cy)
ring.addColorStop(0, '#22d3ee')
ring.addColorStop(0.33, '#7c3aed')
ring.addColorStop(0.66, '#f472b6')
ring.addColorStop(1, '#22d3ee')

ctx.fillStyle = ring
ctx.beginPath()
ctx.arc(cx, cy, 160, 0, Math.PI * 2)
ctx.fill()

Texto degradado, trazos y animación

fillStyle y strokeStyle aceptan los dos un degradado, así que el texto y los contornos funcionan igual. Coloca el degradado sobre la caja del propio texto, medida con measureText(), para que toda la gama de colores aparezca dentro de las letras.

ctx.font = '700 96px Inter, system-ui, sans-serif'
const text = 'Open late'
const width = ctx.measureText(text).width

const tg = ctx.createLinearGradient(80, 0, 80 + width, 0)
tg.addColorStop(0, '#fde68a')
tg.addColorStop(1, '#fb7185')
ctx.fillStyle = tg
ctx.fillText(text, 80, 200)

// Animation: rebuild the gradient each frame, it is cheap
function frame(t) {
  const shift = (Math.sin(t / 2000) + 1) / 2
  const g = ctx.createLinearGradient(0, 0, canvas.width, 0)
  g.addColorStop(0, '#1e1b4b')
  g.addColorStop(0.2 + shift * 0.6, '#7c3aed')
  g.addColorStop(1, '#0f172a')
  ctx.fillStyle = g
  ctx.fillRect(0, 0, canvas.width, canvas.height)
  requestAnimationFrame(frame)
}
requestAnimationFrame(frame)

Guardar el canvas como imagen

Un motivo habitual para dibujar degradados en canvas es generar una imagen: una tarjeta para compartir, un certificado, una portada. Llama a canvas.toBlob() con image/png para degradados y texto, porque PNG conserva intactas las mezclas suaves, y usa JPEG solo cuando la imagen sea sobre todo fotografía. PNG o JPG explica el equilibrio. Dibuja al tamaño real de salida, como 1200×630 para una vista previa de enlace, en lugar de ampliar un canvas pequeño.

canvas.toBlob((blob) => {
  const a = document.createElement('a')
  a.href = URL.createObjectURL(blob)
  a.download = 'card.png'
  a.click()
  setTimeout(() => URL.revokeObjectURL(a.href), 1000)
}, 'image/png')

Problemas habituales con los degradados de canvas

Cuando necesitas degradados que se muevan con iluminación real en lugar de mezclas planas, el canvas llega a su límite y toma el relevo WebGL, como se explica en degradados con shaders. Y cuando el canvas es solo un medio para obtener una imagen, como una tarjeta para redes o un cartel, Gradiently renderiza un Mark a cualquier tamaño entre 200 y 8.000 px con las palabras ya maquetadas, así que no hay código de dibujo que mantener.