How To Draw More Precise Lines using Core Graphics and CALayer

Question

Hello I am having a hard time making this UI element look the way I want (see screenshot). Notice the image on the right--how the line width and darkness looks inconsistent compared to the image on the left (which happens to be a screen grab from safari) where the border width is more consistent. How does apple make their lines so perfect?

I'm using a CALayer and the Core Graphics API to draw the image on the right. Is it possible to draw such perfect lines with the standard apis?

Answer 1

Apple uses images for the tab elements.

Answer 2

The problem with drawing a 1-pixel path is that Quartz draws paths on an exact point grid, starting from {0,0}. This means that if you stroke a vertical path starting at {10,10} with a 1-point width, half of that line will render in the pixel to the left of the coordinate and half in the pixel to the right, causing a blurring effect.

You should therefore shift your drawing by {0.5,0.5} if you want lines to draw on exact pixels.

You can definitely draw what you want with Quartz.