Core Graphics drawings incorrectly scaled and translated in device but okay in Interface Builder

Question

I am trying to draw some arcs and circles using Core Graphics. I am using the new Interface Builder features IBDesignable/IBInspectable to see my view in realtime, and it just acts as it should in Interface Builder. Very simply put, here is my code that draws a circle:

-(void)drawCircleInRect:(CGRect)rect{
    [self.circleColor setFill];
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:self.frame];

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextClearRect(context, rect);

    // If you have content to draw after the shape,
    // save the current state before changing the transform.
    CGContextSaveGState(context);

    [path fill];

    // Restore the graphics state before drawing any other content.
    CGContextRestoreGState(context);
}

I'm calling this in drawRect: and self.circleColor is an IBInspectable property of UIColor, which I've set to white. Here is the result, with no problems:

However, when I run on simulator or the device (tried both, result is the same), this is what I'm getting:

It's like scaled/incorrectly positioned in the view, and therefore clipped. Why could this be? It's like 2x. If it was vice versa I'd assume that it had to do with the Retina scale factor, but this is just the opposite. It draws too large in the retina device, and draws normal on my non-retina Mac's Interface Builder. Any suggestions?

(the bottom black bar is actually a tab bar that I've blacked out, there's nothing abnormal there)

Answer 1

Check this line:

UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:self.frame];

That should be self.bounds, not self.frame.