UIBezierPath fill inside closed area

Question

I am trying to understand if I can fill in a closed area that I have drawn using a UIBezierPath.

Here is the code I am using to draw an irregular shape inside a UIButton:

import UIKit

@IBDesignable class DrawingBox : UIButton {
    
    let strokeColor : UIColor = .systemBlue
    let fillColor : UIColor = .purple
    let clearColor : UIColor = .clear
    
    override func draw(_ rect: CGRect) {
        clipsToBounds = true
        
        strokeColor.setStroke()
        fillColor.setFill()
        
        let bp = UIBezierPath(rect: rect)
        bp.lineWidth = 6.0
        
        bp.move(to: p(50, 50))
        
        bp.addLine(to: p(100, 20))
        bp.addLine(to: p(200, 50))
        bp.addLine(to: p(300, 70))
        bp.addLine(to: p(240, 150))
        bp.addLine(to: p(140, 100))
        bp.close()
        bp.stroke()
                
        bp.fill(with: CGBlendMode.colorDodge, alpha: 1.0)
    }
    
    private func p(_ x: CGFloat, _ y: CGFloat) -> CGPoint {
        return CGPoint(x: x, y: y)
    }
}

That produces this effect:

That is almost what I want; I would like the fill to occur only inside the shape I have drawn. I noticed that if I say just bp.fill() the entire view is filled up with purple. All pointers appreciated, thank you.

Answer 1

Initiate empty UIBezierPath like this

let bp = UIBezierPath()

You will get this output