Drawing a polygon with one color for stroke, and a different one for fill?

Question

I'm having trouble with drawing some lines that are stroked with a color and then filling their insides (they make a polygon) with another one.

UIColor *houseBorderColor = [UIColor colorWithRed:(170/255.0) green:(138/255.0) blue:(99/255.0) alpha:1];
CGContextSetStrokeColorWithColor(context, houseBorderColor.CGColor);
CGContextSetLineWidth(context, 3);

// Draw the polygon
CGContextMoveToPoint(context, 20, viewHeight-19.5);
CGContextAddLineToPoint(context, 200, viewHeight-19.5); // base
CGContextAddLineToPoint(context, 300, viewHeight-119.5); // right border
CGContextAddLineToPoint(context, 120, viewHeight-119.5);
CGContextAddLineToPoint(context, 20, viewHeight-19.5);

// Fill it
CGContextSetRGBFillColor(context, (248/255.0), (222/255.0), (173/255.0), 1);
//CGContextFillPath(context);

// Stroke it
CGContextStrokePath(context);

With the CGContextStrokePath commented out, I get this result:

But if I uncomment CGContextStrokePath and fill out the polygon, the color overflows the strokes:

How do you achieve a result like this (without having to redo the whole drawing procedure twice):

Answer 1

You can use

CGContextDrawPath(context, kCGPathFillStroke);

instead of

CGContextFillPath(context);
CGContextStrokePath(context);

The problem is that both CGContextFillPath() and CGContextStrokePath(context) clear the current path, so that only the first operation succeeds, and the second operation draws nothing. CGContextDrawPath() combines fill and stroke without clearing the path in between.