Как нарисовать размытый круг на холсте HTML5?

Я могу нарисовать простой круг на холсте HTML5, но я хотел бы добавить вокруг него немного размытия.

Я обнаружил этот веб-сайт , который объясняет свойство shadowBlur , которое может здесь пригодиться.

Однако мне не удается сделать сам круг размытым. Свойство shadowBlur в основном создает некоторый эффект размытия после рисования обычного круга. Что я' Я пробовал до сих пор, я поместил в jsFiddle .

Как видно, это сплошной заполненный круг с некоторым эффектом размытия вокруг него - две части вообще не сливаются друг с другом. На самом деле я хотел бы добиться того, чтобы сам круг был полностью размытым, вот так:

Есть ли способ нарисовать такой размытый круг, т.е. чтобы сам круг также имел эффект размытия?