CreateRadial Gradient and Transparency

Question

I play with createRadialGradient() on HTML5 canvas. It works like a charm, except when I try to implement (semi) transparency.

I made this jsFiddle in order to make things clearer: 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'); 

What happens is a circle (radial gradient) painted in (x, y) with radius r , and color stops are r and 'transparent' . However, the green circle goes from green to black , while it should go transparent, that is, the corresponding red colors of the background circle.

How to implement transparent radial gradients on HTML5 canvas?

Answer 1

Well, since you asked:

I don't know much about using <canvas> with JavaScript, but I know about CSS3 gradients, and the usual way to work with transparency is to use rgba colors.

To make the gradient fade transparent, you can add a transparent version of the same color.

What I did here: http://jsfiddle.net/thirtydot/BD3xA/