Can you draw a stroked bezier path that overlaps itself?

Question

I'm trying to draw a stroked path that overlaps itself, but does so in a way that you can tell which part of the path is on top of the other.

One problem I'm running into is that a path will connect to itself if it overlaps with itself. So I'm trying to solve this by drawing two separate paths.

This works great except the stroke from the second line visually disconnects it from the first.

Is there a way to do this that is cleaner than trying to redraw over the stroke that bisecting the two paths?

Edit: To clarify, what I'm actually doing is drawing a fatter black line, and then a colored line overtop to get the stroke effect.

Answer 1

As Jesse guessed above, the solution was to use kCGLineCapButt as the lineCapStyle for the "stroke" part of my path segments.

Doing this turned out to be pretty simple to create the effect I wanted. The biggest annoyance is determining the order to draw the path segments if you are generating your paths dynamically.

You also have to be careful that any two control points are colinear (have the same slope) with the path point they share or else the butt ends won't be perfectly aligned. But you should be doing this anyway if you want smooth looking connections.

1. Stroke your bottom path segment with a butt cap style. This will be the "stroke" (black) of your path segment.

2. Stroke your bottom path segment again with round cap style and a slightly thinner width. This will be the "fill" (color) of your segment.

3. To better illustrate my curves, I've added my control points.

4. Repeat as needed…

5. Final result with control points removed. I've also drawn circles the diameter of my "stroke" (black) width at the beginning and end points of my complete path after stroking for the "fill" (black) path segments to make the ends look like a round butt cap style.