title: How to draw a blurry circle on HTML5 canvas?
body: <p>I'm able to draw a simple circle on HTML5 canvas, but I'd like to add some blur around it.</p>
  
  <p>What I found was <a href="http://flashcanvas.net/examples/uupaa-js-spinoff.googlecode.com/svn/trunk/uuCanvas.js/demo/9_1_canvas_text_shadow_direction.html" rel="noreferrer">this website</a> which explains the <code>shadowBlur</code> property which can come in handy here.</p>
  
  <p>However, I cannot manage to make the circle itself blurry. What the <code>shadowBlur</code> property basically does is painting some blur effect after the regular circle has been drawn. What I've tried so far I've put <a href="http://jsfiddle.net/r8Kqy/1/" rel="noreferrer">on jsFiddle</a>.</p>
  
  <p>As can be seen, it's a solid filled circle with some blur effect around it - the two parts do not blend into each other at all. What I actually would like to achieve is that the circle itself is fully blurred like this:</p>
  
  <p><img src="https://i.stack.imgur.com/6teqB.png" alt="blurred circle"></p>
  
  <p>Is there any way to draw a blurred circle like this, i.e. that the circle itself also has a blur effect?</p>