How to Draw a Circle with Centered Fadeing Out Gradients with HTML5 Canvas?

Question

How can I draw a circle with fadeing out gradients?

I mean something like this:

Getting darker and darker...

Solution

You want to use the ctx.createRadialGradient() method.

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var x = 100,
    y = 75,
    // Radii of the white glow.
    innerRadius = 5,
    outerRadius = 70,
    // Radius of the entire circle.
    radius = 60;

var gradient = ctx.createRadialGradient(x, y, innerRadius, x, y, outerRadius);
gradient.addColorStop(0, 'white');
gradient.addColorStop(1, 'blue');

ctx.arc(x, y, radius, 0, 2 * Math.PI);

ctx.fillStyle = gradient;
ctx.fill();

Example: http://jsfiddle.net/razh/sA6Wc/

Comments

[user2336726]

I mean like a radial gradient...

[Ray Hulha]

Here is a nice particle based on the accepted answer: jsfiddle.net/sA6Wc/422