CGContextFillPath don't fill in intersect sub path - iphone

Question

I have a weird problem when using QuartzCore to draw on a view using user's touch. My idea is draw ellipse in touchesBegan and draw some subpath in touchesMoved and touchesEnd. My code here:
- (void)drawRect:(CGRect)rect
{
// Drawing code
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineJoin (context, kCGLineJoinRound);
CGContextSetLineCap (context, kCGLineCapRound);
CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);
CGContextSetLineWidth(context, 1.0);
CGContextAddPath(context, path);
//CGContextStrokePath(context);
CGContextFillPath(context);
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
if (path == nil) {
CGPathRelease(path);
path = CGPathCreateMutable();
}
strokeWidth = 10;
CGFloat halfWidth = strokeWidth / 2;
CGPoint p = [[touches anyObject] locationInView:self];
CGPathAddEllipseInRect(path, NULL, CGRectMake(p.x - halfWidth, p.y - halfWidth, strokeWidth, strokeWidth));
[self setNeedsDisplay];
}
static CGPoint prevLeft, prevRight;
CGPoint midPoint(CGPoint p1, CGPoint p2) {
return CGPointMake((p1.x + p2.x) / 2, (p1.y + p2.y) / 2);
}
CGPoint triPoint(CGPoint p1, CGPoint p2, CGPoint p3) {
return CGPointMake((p1.x + p2.x + p3.x) / 3, (p1.y + p2.y + p3.y) / 3);
}
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *touch = [touches anyObject];
CGFloat halfWidth = strokeWidth / 2;
CGPoint p1 = [touch previousLocationInView:self];
CGPoint p2 = [touch locationInView:self];
CGPoint lineVector = CGPointMake(p2.x - p1.x, p2.y - p1.y);
CGFloat len = hypotf(lineVector.x, lineVector.y);
CGPoint normalVector = CGPointMake(- lineVector.y / len, lineVector.x / len);
CGFloat valx = normalVector.x * halfWidth;
CGFloat valy = normalVector.y * halfWidth;
CGPoint left1 = CGPointMake(p1.x + valx, p1.y + valy);
CGPoint right1 = CGPointMake(p1.x - valx, p1.y - valy);
CGPoint left = CGPointMake(p2.x + valx, p2.y + valy);
CGPoint right = CGPointMake(p2.x - valx, p2.y - valy);
prevLeft = midPoint(left1, left);
prevRight = midPoint(right1, right);
CGPathMoveToPoint(path, NULL, left1.x , left1.y);
CGPathAddLineToPoint(path, NULL, left.x, left.y);
CGPathAddLineToPoint(path, NULL, right.x, right.y);
CGPathAddLineToPoint(path, NULL, right1.x, right1.y);
CGPathCloseSubpath(path);
[self setNeedsDisplay];
}
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *touch = [touches anyObject];
CGFloat halfWidth = strokeWidth / 2;
CGPoint p1 = [touch previousLocationInView:self];
CGPoint p2 = [touch locationInView:self];
CGPoint lineVector = CGPointMake(p2.x - p1.x, p2.y - p1.y);
CGFloat len = hypotf(lineVector.x, lineVector.y);
CGPoint normalVector = CGPointMake(- lineVector.y / len, lineVector.x / len);
CGFloat valx = normalVector.x * halfWidth;
CGFloat valy = normalVector.y * halfWidth;
CGPoint left1 = CGPointMake(p1.x + valx, p1.y + valy);
CGPoint right1 = CGPointMake(p1.x - valx, p1.y - valy);
CGPoint left = CGPointMake(p2.x + valx, p2.y + valy);
CGPoint right = CGPointMake(p2.x - valx, p2.y - valy);
prevLeft = midPoint(left1, left);
prevRight = midPoint(right1, right);
CGPathMoveToPoint(path, NULL, left1.x , left1.y);
CGPathAddLineToPoint(path, NULL, left.x, left.y);
CGPathAddLineToPoint(path, NULL, right.x, right.y);
CGPathAddLineToPoint(path, NULL, right1.x, right1.y);
CGPathCloseSubpath(path);
[self setNeedsDisplay];
}
But the result when drawing touchesBegan and touchesMoved is here:
it look likes the intersect between ellipse and subpath is not fill with the selected color. Does anyone have this problem before? I am appreciated with your help.
Thanks,