title: CGContextSetLineWidth of varying width around path
body: <p>In one of my apps, I have a custom drawn semitransparent <code>UIView</code> that I use as a cover on top of another UIView for a special effect.</p>
  
  <p>Lower View:
  <img src="https://i.stack.imgur.com/sYAdV.png" alt="alt text"></p>
  
  <p>Lower View with Custom View on Top:
  <img src="https://i.stack.imgur.com/kIBlu.png" alt="alt text"></p>
  
  <p>It works, its great on the iPhone where the side margins are only 10 pixels, but now I need to expand the left and right margins to match the row below it.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>- (void)draw:(TTStyleContext*)context {
      CGContextRef ctx = UIGraphicsGetCurrentContext();
      CGContextSaveGState(ctx);
  
      [_color setStroke];
      CGContextSetLineWidth(ctx, MIN(_xwidth, _ywidth));
  
      CGFloat fw = context.frame.size.width;
      CGFloat fh = context.frame.size.height;
  
      CGContextMoveToPoint(ctx, fw, floor(fh/2));
      CGContextAddArcToPoint(ctx, fw, fh, floor(fw/2), fh, RD(_radius));
      CGContextAddArcToPoint(ctx, 0, fh, 0, floor(fh/2), RD(_radius));
      CGContextAddArcToPoint(ctx, 0, 0, floor(fw/2), 0, RD(_radius));
      CGContextAddArcToPoint(ctx, fw, 0, fw, floor(fh/2), RD(_radius));
      CGContextClosePath(ctx);
      CGContextStrokePath(ctx);
  
      CGContextRestoreGState(ctx);
  
      context.frame = CGRectInset(context.frame, _xwidth/2, _ywidth/2);
      return [self.next draw:context];
  }
  </code></pre>
  
  <p>After setting the <code>_xwidth</code> and <code>_ywidth</code>, the key part of this code is the <code>MIN</code> for the stroke width.  The idea here is that the frame is by default, the same stroke width all around.  What I am asking it to do is make the stroke width bigger on the sides than on the top and bottom. Using <code>MIN</code> ensures that the stroke does not get the thicker <code>_xwidth</code> size and bleed into the center. If I use the <code>_ywidth</code> value, the sides look great but I don't get the transparent red anymore because the top and bottom borders bleed into the center.  This brings me to my question:</p>
  
  <p><strong>Is there a way for me to specify that I want the stroke to be <code>_xwidth</code> thick on the sides and <code>_ywidth</code> thick on the top and bottom?</strong> If not, is there another easier way I am overlooking?</p>
  
  <p>With my code, _xwidth set to 42, _ywidth set to 10, I get this:
  <img src="https://i.stack.imgur.com/HZcyt.png" alt="alt text">
  You can see what I am going for here, and how I need to get the side stroke to cover up the uncovered red background.</p>