drawing 2 rectangles with gradient on the same view in IOS (swift) - ios

Question

I can't manage to display 2 rectangles with gradients on the same view. My following code only shows the first rectangle. If I omit the rectangle1 in the code the rectangle2 is displayed. Only in combination it will only show rectangle1.
I like to display the blue rectangle1 ...
... and the red rectangle2 with different gradient ...
... at the same time.
I have the following code for this:
func draw_2_gradient_rectangles(){
let locations: [CGFloat] = [ 0.0, 1.0 ]
let colorspace = CGColorSpaceCreateDeviceRGB()
// first rectangle
let context = UIGraphicsGetCurrentContext()
let colors = [UIColor.blueColor().CGColor,
UIColor.whiteColor().CGColor]
let gradient = CGGradientCreateWithColors(colorspace,
colors, locations)
var startPoint1 = CGPoint()
var endPoint1 = CGPoint()
startPoint1.x = 0.0
startPoint1.y = 10.0
endPoint1.x = 100;
endPoint1.y = 10
let rectangle_main1 = CGRectMake(CGFloat(15), CGFloat(0), CGFloat(100), CGFloat(30));
CGContextAddRect(context, rectangle_main1);
CGContextClip(context)
CGContextDrawLinearGradient(context, gradient, startPoint1, endPoint1, 0)
// second rectangle
let context2 = UIGraphicsGetCurrentContext()
let colors2 = [UIColor.redColor().CGColor,
UIColor.whiteColor().CGColor]
let gradient2 = CGGradientCreateWithColors(colorspace,
colors2, locations)
var startPoint2 = CGPoint()
var endPoint2 = CGPoint()
startPoint2.x = 100;
startPoint2.y = 10.0;
endPoint2.x = 10.0;
endPoint2.y = 10.9;
let rectangle_main2 = CGRectMake(CGFloat(15), CGFloat(50), CGFloat(100), CGFloat(30));
CGContextAddRect(context2, rectangle_main2);
CGContextClip(context2)
CGContextDrawLinearGradient(context2, gradient2, startPoint2, endPoint2, 0);
}
What am I doing wrong ? Any help ?

Answer 1

UIGraphicsGetCurrentContext() does not create a context but just gives you a reference to the current one.
This means context is the same as context2. And in context you clipped the drawing area so the next CGContextAddRect will draw outside the clipping area.
What you need to do is save the drawing state before each rectangle creation code with :
CGContextSaveGState(context);
and restore it before doing the second rectangle code with
CGContextRestoreGState(context);
This will make sure the clipping area is reset before drawing the second rectangle. e.g:
CGContextSaveGState(context);
// Create rectangle1
CGContextRestoreGState(context);
CGContextSaveGState(context);
// Create rectangle2
CGContextRestoreGState(context);