I am attempting to draw a stroked circle by using a CAShapeLayer and setting a circular path on it.  However, this method is consistently less accurate when rendered to the screen than using borderRadius or drawing the path in a CGContextRef directly.

Here are the results of all three methods: ![enter image description here][1]

Notice that the third is poorly rendered, especially inside the stroke on the top and bottom. 

I **have** set the `contentsScale` property to `[UIScreen mainScreen].scale`.

Here is my drawing code for these three circles. What’s missing to make the CAShapeLayer draw smoothly?

    @interface BCViewController ()

    @end

    @interface BCDrawingView : UIView

    @end

    @implementation BCDrawingView

    - (id)initWithFrame:(CGRect)frame
    {
        if ((self = [super initWithFrame:frame])) {
            self.backgroundColor = nil;
            self.opaque = YES;
        }

        return self;
    }

    - (void)drawRect:(CGRect)rect
    {
        [super drawRect:rect];

        [[UIColor whiteColor] setFill];
        CGContextFillRect(UIGraphicsGetCurrentContext(), rect);

        CGContextSetFillColorWithColor(UIGraphicsGetCurrentContext(), NULL);
        [[UIColor redColor] setStroke];
        CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 1);
        [[UIBezierPath bezierPathWithOvalInRect:CGRectInset(self.bounds, 4, 4)] stroke];
    }

    @end

    @interface BCShapeView : UIView

    @end

    @implementation BCShapeView

    + (Class)layerClass
    {
        return [CAShapeLayer class];
    }

    - (id)initWithFrame:(CGRect)frame
    {
        if ((self = [super initWithFrame:frame])) {
            self.backgroundColor = nil;
            CAShapeLayer *layer = (id)self.layer;
            layer.lineWidth = 1;
            layer.fillColor = NULL;
            layer.path = [UIBezierPath bezierPathWithOvalInRect:CGRectInset(self.bounds, 4, 4)].CGPath;
            layer.strokeColor = [UIColor redColor].CGColor;
            layer.contentsScale = [UIScreen mainScreen].scale;
            layer.shouldRasterize = NO;
        }

        return self;
    }

    @end


    @implementation BCViewController

    - (void)viewDidLoad
    {
        [super viewDidLoad];

        UIView *borderView = [[UIView alloc] initWithFrame:CGRectMake(24, 104, 36, 36)];
        borderView.layer.borderColor = [UIColor redColor].CGColor;
        borderView.layer.borderWidth = 1;
        borderView.layer.cornerRadius = 18;
        [self.view addSubview:borderView];

        BCDrawingView *drawingView = [[BCDrawingView alloc] initWithFrame:CGRectMake(20, 40, 44, 44)];
        [self.view addSubview:drawingView];

        BCShapeView *shapeView = [[BCShapeView alloc] initWithFrame:CGRectMake(20, 160, 44, 44)];
        [self.view addSubview:shapeView];

        UILabel *borderLabel = [UILabel new];
        borderLabel.text = @&quot;CALayer borderRadius&quot;;
        [borderLabel sizeToFit];
        borderLabel.center = CGPointMake(borderView.center.x + 26 + borderLabel.bounds.size.width/2.0, borderView.center.y);
        [self.view addSubview:borderLabel];

        UILabel *drawingLabel = [UILabel new];
        drawingLabel.text = @&quot;drawRect: UIBezierPath&quot;;
        [drawingLabel sizeToFit];
        drawingLabel.center = CGPointMake(drawingView.center.x + 26 + drawingLabel.bounds.size.width/2.0, drawingView.center.y);
        [self.view addSubview:drawingLabel];

        UILabel *shapeLabel = [UILabel new];
        shapeLabel.text = @&quot;CAShapeLayer UIBezierPath&quot;;
        [shapeLabel sizeToFit];
        shapeLabel.center = CGPointMake(shapeView.center.x + 26 + shapeLabel.bounds.size.width/2.0, shapeView.center.y);
        [self.view addSubview:shapeLabel];
    }


    @end


EDIT: For those who cannot see the difference, I&#39;ve drawn circles on top of each other and zoomed in:

Here I&#39;ve drawn a red circle with `drawRect:`, and then drawn an identical circle with `drawRect:` again in green on top of it. Note the limited bleed of red. Both of these circles are &quot;smooth&quot; (and identical to the `cornerRadius` implementation):

![enter image description here][2]

In this second example, you&#39;ll see the issue. I&#39;ve drawn once using a `CAShapeLayer` in red, and again on top with a `drawRect:` implementation of the same path, but in green. Note that you can see a lot more inconsistency with more bleed from the red circle underneath. It&#39;s clearly being drawn in a different (and worse) fashion.

![enter image description here][3]


  [1]: http://i.stack.imgur.com/iYdyI.png
  [2]: http://i.stack.imgur.com/lpThN.png
  [3]: http://i.stack.imgur.com/2N1h0.png

All Cashapelayer Solutions on Gang of Coders

Total of 1 Cashapelayer Solutions

How to draw a smooth circle with CAShapeLayer and UIBezierPath?