title: iOS: Draw clear circle with UIBezierPath bezierPathWithOvalInRect:
body: <p>In my <code>UITableViewController</code>'s cells, I want to display a circle with a number in it. I am using <code>UIBezierPath</code>'s <code>bezierPathWithOvalInRect:</code> to draw the circle.  </p>
  
  <p>Unfortunately, while I can set the <code>fill</code> color to be <code>clearColor</code>, the unused portion of the <code>CGRect</code> passed to <code>bezierPathWithOvalInRect:</code> is black.</p>
  
  <p>How do I get rid of the black area created?</p>
  
  <p>Partial screenshot for reference:<br>
  <img src="https://i.stack.imgur.com/f0Fig.png" alt="Screenshot"><br>
  (I eventually hope to get that number inside the circle)</p>
  
  <p>Code:  </p>
  
  <h3>LTTTableViewCell:</h3>
  
  <pre><code>- (void)awakeFromNib {
      [super awakeFromNib];
  
      // Create a square view using the height of the cell
      CGRect positionFrame = CGRectMake(0, 0, self.bounds.size.height, self.bounds.size.height);
      LTTDrawBallView *drawBallView = [[LTTDrawBallView alloc] initWithFrame:positionFrame];
      [self.contentView addSubview:drawBallView];
  }
  </code></pre>
  
  <h3>LTTDrawBallView:</h3>
  
  <pre><code>- (void)drawRect:(CGRect)rect
  {
      // Create a new rect with some padding  
      // + create a circle from this new rect:
      CGRect box = CGRectInset(self.bounds, self.bounds.size.width * 0.1f, self.bounds.size.height * 0.1f);
      UIBezierPath *ballBezierPath = [UIBezierPath bezierPathWithOvalInRect:box];
      [[UIColor whiteColor] setStroke];
      [[UIColor greenColor] setFill]; // Green here to show the black area
      [ballBezierPath stroke];
      [ballBezierPath fill];
      [self setBackgroundColor:[UIColor clearColor]]; // Happens with and without this line
  }
  </code></pre>