title: How to fill the area below a path in Quartz 2D?
body: <p>I am using Quartz 2D in a UIView object to draw several curves, like this example:</p>
  
  <p><img src="https://i.stack.imgur.com/TmEmM.png" alt="Two curves drawn using Quartz 2D with &lt;code&gt;CGContextStrokePath&lt;/code&gt;"></p>
  
  <p>This is the code I have right now (I have omitted the calculation of control points and other stuff):</p>
  
  <pre><code>for (int i = 1; i &lt; points.count; ++i) {
    CGContextMoveToPoint(context, previousXValue, previousYValue);
    CGContextAddCurveToPoint(context,
      firstControlPointXValue, firstControlPointYValue,
      secondControlPointXValue, secondControlPointYValue,
      xValue, yValue
    );
  
    // CGContextFillPath(context);
    CGContextStrokePath(context);
  }
  </code></pre>
  
  <p>Now I would like to fill the area below the curve, but if I use <code>CGContextFillPath</code> the result is the following:</p>
  
  <p><img src="https://i.stack.imgur.com/NTyKo.png" alt="Two curves filled using Quartz 2D with &lt;code&gt;CGContextFillPath&lt;/code&gt;"></p>
  
  <p>which makes sense, because according to <a href="https://developer.apple.com/library/mac/#documentation/graphicsimaging/conceptual/drawingwithquartz2d/dq_paths/dq_paths.html" rel="nofollow noreferrer">Quartz 2D documentation</a>:</p>
  
  <blockquote>
    <p><em>When you fill the current path, Quartz acts as if each subpath contained in the path were closed. It then uses these closed subpaths
    and calculates the pixels to fill.</em></p>
  </blockquote>
  
  <p>Then I tried to move the path to the lower right corner and close the path, but the fill method doesn't have any effect:</p>
  
  <pre><code>CGContextMoveToPoint(context, rect.size.width, rect.size.height);
  CGContextClosePath(context);
  CGContextFillPath(context);
  </code></pre>
  
  <p>How could I fill the whole area below the curve and not just the subarea closed in every subpath?</p>
  
  <h3>EDIT:</h3>
  
  <p>I have found a temporary solution: drawing a shape using the curve and two vertical lines on each subpath:</p>
  
  <pre><code>for (int i = 1; i &lt; points.count; ++i) {
    // Draw the curve
    CGContextMoveToPoint(context, previousXValue, previousYValue);
    CGContextAddCurveToPoint(context,
      firstControlPointXValue, firstControlPointYValue,
      secondControlPointXValue, secondControlPointYValue,
      xValue, yValue
    );
    CGContextStrokePath(context);
  
    // Draw a shape using curve's initial and final points
    CGContextMoveToPoint(context, previousXValue, rect.size.height);
    CGContextAddLineToPoint(context, previousXValue, previousYValue);
    CGContextAddCurveToPoint(context,
      firstControlPointXValue, firstControlPointYValue,
      secondControlPointXValue, secondControlPointYValue,
      xValue, yValue
    );
    CGContextAddLineToPoint(context, xValue, rect.size.height);
    CGContextFillPath(context);
  }
  </code></pre>
  
  <p>I don't know if this is overkill, so improvements are also welcomed. Besides, I'm getting this result:</p>
  
  <p><img src="https://i.stack.imgur.com/Ip7A8.png" alt="Two curves drawn using Quartz 2D with the area below them filled"></p>
  
  <p>Note that vertical lines appear as a result of drawing the subareas next to each other. How can that be avoided?</p>