Question

the pixman image library can draw radial color gradients between two circles. I’d like the radial gradient to fill a rectangular area defined by “width” and “height” completely. Now my question, how should I choose the radius of the outer circle?

My current parameters are the following:

A) inner circle (start of gradient)
center pointer of inner circle: (width*0.5|height*0.5)
radius of inner circle: 1
color: black

B) outer circle (end of gradient)
center pointer of outer circle: (width*0.5|height*0.5)
radius of outer circle: ???
color: white

How should I choose the radius of the outer circle to make sure that the outer circle will entirely fill my bounding rectangle defined by width*height. There shall be no empty areas in the corners, the area shall be completely covered by the circle. In other words, the bounding rectangle width,height must fit entirely into the outer circle. Choosing

outer_radius = max(width, height) * 0.5

as the radius for the outer circle is obviously not enough. It must be bigger, but how much bigger?

Thanks!

Answer 1

The diameter of the circle should be the diagonal of the rectangle, which you can easily calculate from Pythagoras’ Theorem. ie:

outer_radius = 0.5 * sqrt(width * width + height * height)