How to use radian values in the Canvas method createRadialGradient()

Question

Hey guys,

Could someone give me an explanation of the 3rd & 6th params of the following Canvas method:

createRadialGradient(0, 0, 50, 0, 0, 100);

I've been told they're radian values and I'm not familiar with those types and would like to understand how to use them properly.

Thanks.

Answer 1

They're not radian values but radius values. See e.g. here for parameter descriptions and an example that you can run in your browser.

The 3rd param is the radius of the start circle, and the 6th param is the radius of the end circle. Visualize a circle moving from an initial center and radius, to a final center and radius, smoothly interpolating in between. So you get a cylinder or cone of color (or some shape in between cylinder and cone). If the two centers are the same, you get a disc or donut shape.

Play with the params in the example above and you'll see how the parts of the gradient change. Increase the 3rd param, and you'll have a (bigger) "hole" in the middle of your gradient. Decrease the 6th param, and your gradient won't go out as far.