createRadialGradient y transparencia

Question

Estoy jugando con createRadialGradient() en canvas HTML5. Funciona a las mil maravillas, excepto cuando intento implementar (semi) transparencia.

Hice este jsFiddle para hacer las cosas más claras: es de esperar http://jsfiddle.net/rfLf6/1/.

function circle(x, y, r, c) { 
    ctx.beginPath(); 
    var rad = ctx.createRadialGradient(x, y, 1, x, y, r); 
    rad.addColorStop(0, c); 
    rad.addColorStop(1, 'transparent'); 
    ctx.fillStyle = rad; 
    ctx.arc(x, y, r, 0, Math.PI*2, false); 
    ctx.fill(); 
} 

ctx.fillRect(0, 0, 256, 256); 

circle(128, 128, 200, 'red'); 
circle(64, 64, 30, 'green'); 

Lo que ocurre es un círculo (gradiente radial) está pintada en (x, y) con radio r y las paradas de color son r y 'transparent'. Sin embargo, el círculo verde va del verde al negro, mientras que debería ir a transparente, es decir, a los colores rojos apropiados del círculo de fondo.

¿Cómo se puede aplicar gradientes radiales transparentes sobre lienzo HTML5?

Answer 1

Bueno, ya que preguntas:

no sé mucho sobre el uso de <canvas> con JavaScript, pero sí sé sobre gradientes CSS3, y la manera habitual de trabajar con transparencia es utilizar rgba colores.

Para hacer que el gradiente de "fade out" a transparente, se puede añadir una versión transparente del mismo color.

Eso es lo que hice aquí: http://jsfiddle.net/thirtydot/BD3xA/