Clipping Paths

Clipping paths allow you to control where drawing occurs by providing a path in which to limit future drawing operations. Since you can create arbitrary shapes with CGMutablePath (and UIBezierPath) this can be an essential technique to get the drawing effect in some situations.

Notice that the rect we filled will only be drawn inside the circle path we defined earlier.

Undoing a Clip

It isn't really possible to undo a clipping operation (other than resetting the clip to be the entire drawing rect), so if you want to add more drawing outside a previously clipped path, you'll have to rely on the graphics state stack:

// save the current graphics statecontext.saveGState()// create pathletpath=CGMutablePath()path.addEllipse(in:CGRect(x:25,y:25,width:100,height:100))// clip to the pathcontext.addPath(path)context.clip()// draw inside the clipped areacontext.setFillColor(CGColor(colorSpace:colorSpace,components:[1,0,0,1])!)context.fill(CGRect(x:50,y:50,width:100,height:100))// 'pop' the state off the stack, undoing any previous drawing operationscontext.restoreGState()// draw more stuff, which won't be clippedcontext.setFillColor(CGColor(colorSpace:colorSpace,components:[0,0,1,1])!)context.fill(CGRect(x:150,y:150,width:100,height:100))

Drawing a Gradient Inside a Rounded Rect

We can do more complex drawings as well and clip them to get interesting effects. This might be used as the basis for an iOS-style icon: