Update: When writing this I wasn’t aware of CGRectIntegral() which is by far a better choice (as QC explains in the comments).

If you ever did extensive drawing with quartz, or any dynamic UI placement on the iPhone, you probably stumbled on this as well. I first saw it when drawing the oval shapes that show your priority in Matalot. The drawing code was very simple. Add an oval path, then fill + stroke. But to my surprise, when testing on the simulator the drawing was blurred. On my iPhone’s small screen it was less obvious, but blurred as well.

At first I thought something is wrong with my eyes. But then I added another instance of my view which rendered perfectly. There I was, with two instances of the same view, one blurred and one with the crisp anti-aliasing you’d expect from quartz. WTF?!

After many sleepless hours I suddenly remembered an article I once read about font rendering. In that article they discussed the rendering issues and how Windows draws fonts differently from OS X. Writing about this made me look up this article. It’s a very interesting reading, especially if graphics is your thing. Also be sure to read the linked articel about sub-pixel rendering.

Back to the subject, Apple and many others are using sub-pixel rendering to get beautiful anti-aliasing. Apple also prefers to stay loyal to the original drawing, even at cost of slight blurring. So perhaps my drawing just falls under this category? At this point I stepped back and checked out the exact placement and size of my views. And guess what, the blurred one was placed at non-integer pixels.

It turns out that quartz rendering gets blurred when placed at non-integer pixels! Rounding each pixel of the blurred view’s frame magically drew a beautiful result. How did I end up with non-integer values in the first place you ask? Simple. Placing a view at otherView.bounds.size.width / 2.0 may result in something like 45.5, and BOOM! You got blurred result.

Here is a quick function I use in order to make sure my views’ frames are with integer values. Feel free to use it as you wish.

static inline CGRect DPIntRect(CGRect rect) {
#if CGFLOAT_IS_DOUBLE
	rect.origin.x = lrintl(rect.origin.x);
	rect.origin.y = lrintl(rect.origin.y);
	rect.size.width = lrintl(rect.size.width);
	rect.size.height = lrintl(rect.size.height);
#else
	rect.origin.x = lrintf(rect.origin.x);
	rect.origin.y = lrintf(rect.origin.y);
	rect.size.width = lrintf(rect.size.width);
	rect.size.height = lrintf(rect.size.height);
#endif
 
	return rect;
}

I’d love to hear if you also experienced this, especially if you have a different solution

Update: Fixed a bug when drawing at origin different from 0,0.

If you’re doing Quartz drawing code, you probably need or will need to draw a rect with round corners. Doing it for so many times, I just came up with this simple routine which will hopefully make your life easier:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

void DPContextAddRoundRect(CGContextRef context, CGRect rect, CGFloat cornerRad) {
	// Top Left
	CGContextMoveToPoint(context, rect.origin.x, cornerRad);
	CGContextAddArcToPoint(context,
                               rect.origin.x,
                               rect.origin.y,
                               rect.origin.x + cornerRad,
                               rect.origin.y,
                               cornerRad);
	// Top right
	CGContextAddArcToPoint(context,
                               rect.origin.x + rect.size.width,
                               rect.origin.y,
                               rect.origin.x + rect.size.width,
                               rect.origin.x + cornerRad,
                               cornerRad);
	// Bottom right
	CGContextAddArcToPoint(context,
                               rect.origin.x + rect.size.width,
                               rect.origin.y + rect.size.height,
                               rect.origin.x + rect.size.width - cornerRad,
                               rect.origin.y + rect.size.height,
                               cornerRad);
	// Bottom left
	CGContextAddArcToPoint(context,
                               rect.origin.x,
                               rect.origin.y + rect.size.height,
                               rect.origin.x,
                               rect.origin.y,
                               cornerRad);
	CGContextClosePath(context);
}

This simple function takes a rect in which to draw the path, and a radius for the corners. Play with it and see how it works.