title: iOS Bezier path shows with zig-zags
body: <p>trying to learn some Quartz graphics and trying to do a smooth drawing. I am trying to combine this 2 tutorials</p>
  
  <p><a href="http://mobile.tutsplus.com/tutorials/iphone/ios-sdk_freehand-drawing/" rel="nofollow noreferrer">http://mobile.tutsplus.com/tutorials/iphone/ios-sdk_freehand-drawing/</a></p>
  
  <p><a href="http://www.raywenderlich.com/18840/how-to-make-a-simple-drawing-app-with-uikit" rel="nofollow noreferrer">http://www.raywenderlich.com/18840/how-to-make-a-simple-drawing-app-with-uikit</a></p>
  
  <p>And so far this is my code</p>
  
  <pre><code>#import "ViewController.h"
  
  @interface ViewController ()
  {
      UIBezierPath *path;
      CGPoint pts[5];
      uint ctr;
  }
  @end
  
  @implementation ViewController
  
  - (void)viewDidLoad
  {
      [super viewDidLoad];
      // Do any additional setup after loading the view, typically from a nib.
  
  
      [self setupData];
  
  }
  
  - (void)didReceiveMemoryWarning
  {
      [super didReceiveMemoryWarning];
      // Dispose of any resources that can be recreated.
  }
  
  
  
  -(void) setupData
  {
      [self.mainImage setMultipleTouchEnabled:NO];
      [self.tempImage setMultipleTouchEnabled:NO];
      path = [UIBezierPath bezierPath];
      [path setLineWidth:2.0];
  
  }
  
  
  - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
  {
      ctr = 0;
      UITouch *touch = [touches anyObject];
      pts[0] = [touch locationInView:self.tempImage];
  }
  
  
  - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
  {
      UITouch *touch = [touches anyObject];
      CGPoint p = [touch locationInView:self.tempImage];
      ctr++;
      pts[ctr] = p;
      if (ctr == 4)
      {
          pts[3] = CGPointMake((pts[2].x + pts[4].x)/2.0, (pts[2].y + pts[4].y)/2.0); // move the endpoint to the middle of the line joining the second control point of the first Bezier segment and the first control point of the second Bezier segment
          [path moveToPoint:pts[0]];
          [path addCurveToPoint:pts[3] controlPoint1:pts[1] controlPoint2:pts[2]]; // add a cubic Bezier from pt[0] to pt[3], with control points pt[1] and pt[2]
  
          [self draw];
  
          [self.mainImage setNeedsDisplay];
          [self.tempImage setNeedsDisplay];
          // replace points and get ready to handle the next segment
          pts[0] = pts[3];
          pts[1] = pts[4];
          ctr = 1;
      }
  }
  
  
  
  - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
  {
  
      [path removeAllPoints];
      ctr = 0;
  
  
      UIGraphicsBeginImageContext(self.tempImage.frame.size);
      [self.mainImage.image drawInRect:CGRectMake(0, 0, self.tempImage.frame.size.width, self.tempImage.frame.size.height) blendMode:kCGBlendModeNormal alpha:1.0];
      [self.tempImage.image drawInRect:CGRectMake(0, 0, self.tempImage.frame.size.width, self.tempImage.frame.size.height) blendMode:kCGBlendModeNormal alpha:1.0];
      self.mainImage.image = UIGraphicsGetImageFromCurrentImageContext();
      self.tempImage.image = nil;
  
      [self.tempImage setNeedsDisplay];
      [self.mainImage setNeedsDisplay];
  
      UIGraphicsEndImageContext();
  
  
  
  }
  
  - (void)draw
  {
      UIGraphicsBeginImageContext(self.tempImage.frame.size);
      [self.tempImage.image drawInRect:CGRectMake(0, 0, self.tempImage.frame.size.width, self.tempImage.frame.size.height)];
  
      pts[3] = CGPointMake((pts[2].x + pts[4].x)/2.0, (pts[2].y + pts[4].y)/2.0); // move the endpoint to the middle of the line joining the second control point of the first Bezier segment and the first control point of the second Bezier segment
      [path moveToPoint:pts[0]];
      [path addCurveToPoint:pts[3] controlPoint1:pts[1] controlPoint2:pts[2]]; // add a cubic Bezier from pt[0] to pt[3], with control points pt[1] and pt[2]
      [path stroke];
  
      CGContextSetBlendMode(UIGraphicsGetCurrentContext(),kCGBlendModeNormal);
  
      //    CGContextStrokePath(UIGraphicsGetCurrentContext());
      self.tempImage.image = UIGraphicsGetImageFromCurrentImageContext();
      [self.tempImage setAlpha:1.0];
  
  
      UIGraphicsEndImageContext();
  
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/YW7sJ.png" alt="i.imgur.com/qOwihxC.png"></p>
  
  <p>The corners looked much better, but the lines itself look like they have zigzags in them. Would appreciate if you can point me to my mistake. Thanks </p>