title: createRadialGradient and transparency
body: <p>I'm playing around with <code>createRadialGradient()</code> on HTML5 canvas. It works like a charm, except when I'm trying to implement (semi-)transparency.</p>
  
  <p>I made this jsFiddle to make things hopefully clearer: <a href="http://jsfiddle.net/rfLf6/1/" rel="noreferrer">http://jsfiddle.net/rfLf6/1/</a>.</p>
  
  <pre><code>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');
  </code></pre>
  
  <p>What is happening is a circle (radial gradient) is painted at <code>(x, y)</code> with radius <code>r</code> and the color stops are <code>r</code> and <code>'transparent'</code>. However, the green circle is going from green to <strong>black</strong>, whilst it should go to transparent, i.e. the appropriate red colors of the background circle.</p>
  
  <p>How does one implement transparent radial gradients on HTML5 canvas?</p>