UIBezierPath with multiple paths not joining lines with bevel type

Question

Probably a simple bug, but I can't figure out what's going on.

I have 3 UIBezierPaths that I am merging into 1. I want either end of the path to have a rounded edge, with the middle path to have a bevel lineJoinStyle. However, the last path seems to have a rounded lineJoinStyle which I can't seem to fix.

Here is an image of what I mean.

Here is the code I'm using:

    override func draw(_ rect: CGRect) {

        let leftQuarterPoint: CGPoint = CGPoint(x: 15, y: rect.height / 2)
        let rightQuarterPoint: CGPoint = CGPoint(x: (rect.width - (rect.width / 4)), y: rect.height / 2)
        let leftPath = UIBezierPath()
        leftPath.move(to: leftQuarterPoint)
        let firstPoint = CGPoint(x: rect.width / 4, y: rightQuarterPoint.y)
        Global.Colors.red.setStroke()

        leftPath.addCurve(to: firstPoint, controlPoint1: CGPoint(x: leftQuarterPoint.x, y: rightQuarterPoint.y), controlPoint2: CGPoint(x: firstPoint.x, y: firstPoint.y))
        leftPath.lineWidth = 20
        leftPath.lineCapStyle = .round
        leftPath.stroke()


        let middlePath = UIBezierPath()

        Global.Colors.orange.setStroke()
        middlePath.move(to: leftPath.currentPoint)
        middlePath.addCurve(to: rightQuarterPoint, controlPoint1: CGPoint(x: rect.width / 2, y: rect.height / 2), controlPoint2: CGPoint(x: rect.width / 2, y: rect.height / 2))
        middlePath.lineWidth = 20
        middlePath.lineCapStyle = .square
        middlePath.lineJoinStyle = .bevel
        middlePath.stroke()


        let rightPath = UIBezierPath()
        Global.Colors.green.setStroke()

        rightPath.move(to: middlePath.currentPoint)

        rightPath.addCurve(to: CGPoint(x: rect.width - 15, y: (rect.height / 2)), controlPoint1: CGPoint(x: rightQuarterPoint.x, y: rightQuarterPoint.y), controlPoint2: CGPoint(x: rect.width-15, y: rect.height / 2))
        rightPath.lineWidth = 20
        rightPath.lineCapStyle = .round
        rightPath.lineJoinStyle = .bevel
        rightPath.stroke()

        let path = UIBezierPath()


        path.append(leftPath)
        path.append(middlePath)
        path.append(rightPath)


        path.lineWidth = 20

    }

Sorry if I'm missing something simple.

Answer 1

Removing these lines from the code and adding them to the end of the draw func will work for you, the reason is side paths are rounded but they have overlap with the middle one so if you drow sides first and then draw the middle one it will hide the round corners.

override func draw(_ rect: CGRect) {

       ...

        Global.Colors.green.setStroke()
        rightPath.stroke()

        Global.Colors.red.setStroke()
        leftPath.stroke()

        Global.Colors.orange.setStroke()
        middlePath.stroke()
}