Question

136

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

rated 0 times [ 137] [ 1] / answers: 1 / hits: 23505 / 11 Years ago, sat, may 11, 2013, 12:00:00

How can I draw a circle with fadeing out gradients?

I mean something like this:

Getting darker and darker...

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

deniseryannd

Add To Favorites

Follow

Total Points: 169

Total Questions: 85

Total Answers: 96

Location: Virgin Islands (U.S.)

Member since Fri, May 7, 2021

3 Years ago

answered 11 Years ago clarkulisesa · Accepted Answer

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/