title: CGGradient and path clipping: strange border around the clip
body: <p>I'm trying to reproduce an example in the book <strong>iOS Programming: Big Nerd Ranch Guide 4th edition</strong>.</p>
  
  <p>Note that I rewrite in Swift all the Obj-C code in the book.</p>
  
  <p>As a challenge, the book requires to draw this triangle-shaped gradient, using Core Graphics: </p>
  
  <p><img src="https://i.stack.imgur.com/yrkay.jpg" alt="enter image description here"></p>
  
  <p>But when I run my code, I notice a litte grey border surrounding the triangle:</p>
  
  <p><img src="https://i.stack.imgur.com/ds2iS.jpg" alt="enter image description here"></p>
  
  <p>I can't understand why.... this is my code:</p>
  
  <pre><code>    ....
      // draw circles
      UIColor.grayColor().setStroke()
      path.stroke()
  
      let logoImg = UIImage(named: "logo.png")
      let realSize:CGSize = logoImg.size.halve() // get a /2 CGSize in order to calculate non-retina size
  
      let gradientLocations:[CGFloat] = [0, 1]
      let gradientColors:[CGFloat] = [0, 1, 0, 1,
                                      1, 1, 0, 1]
      let colorSpace = CGColorSpaceCreateDeviceRGB()
      let gradient = CGGradientCreateWithColorComponents(colorSpace, gradientColors, gradientLocations, 2)
  
      let gradientClipPath = UIBezierPath()
      gradientClipPath.moveToPoint(CGPoint(x: center.x - realSize.width/2, y: center.y + realSize.height/2 + 30))
      gradientClipPath.addLineToPoint(CGPoint(x: center.x + realSize.width/2, y: center.y + realSize.height/2 + 30))
      gradientClipPath.addLineToPoint(CGPoint(x: center.x, y: center.y - realSize.height/2 - 30))
      gradientClipPath.addLineToPoint(CGPoint(x: center.x - realSize.width/2, y: center.y + realSize.height/2 + 30))
      gradientClipPath.fill()
  
      // draw gradient
      CGContextSaveGState(currContext)
      gradientClipPath.addClip()
      CGContextDrawLinearGradient(currContext, gradient, CGPoint(x: 0, y: center.y - realSize.height/2 - 30), CGPoint(x: 0, y: center.y + realSize.height/2 + 30), 0)
      CGContextRestoreGState(currContext)
  
      // draw logo with drop shadow
      ....
  </code></pre>
  
  <p>Setting stroke to clear <strong><em>or to other colors</em></strong> has no effect. Border is still there and it is still grey.</p>