Why does my CGContext-drawn circle suck?

Question

I have a custom table view cell that is intended to draw a circle like the iPhone’s Mail.app does:

Instead, it draws like this:

Here’s my code:

CGContextRef context = UIGraphicsGetCurrentContext();
UIColor *grayColor = [UIColor grayColor];

[grayColor set];

CGContextStrokeEllipseInRect(context, CGRectMake(9, 10, 23, 23));

How can I make it not suck? :)

Edit: Ignore the fact that I omitted the code that draws the white background color.

What about it sucks? It doesn’t look close to, if not exactly like, the circle from Mail.

Answer 1

I was able to solve this by changing the UIColor to the same color Apple uses, #E5E5E5:

[UIColor colorWithRed: 0.8980392157 green: 0.8980392157 blue: 0.8980392157 alpha: 1.0]

And changing the line width from the default 1.0 to 2.0:

CGContextSetLineWidth(context, 2.0);

Tweaking the size was also necessary:

CGContextStrokeEllipseInRect(context, CGRectMake(10, 11, 21, 21));

The final code looks like this:

CGContextRef context = UIGraphicsGetCurrentContext();
UIColor *grayColor = [UIColor colorWithRed: 0.8980392157 green: 0.8980392157 blue: 0.8980392157 alpha: 1.0];

[grayColor set];

CGContextSetLineWidth(context, 2.0);
CGContextStrokeEllipseInRect(context, CGRectMake(10, 11, 21, 21));

And outputs like this:

Answer 2

Try setting its alpha to 0.5 and making the borders thicker, for example, like this:

CGContextSetAlpha(context, 0.5);