Why is my Core Graphics triangle being inverted when I draw it?

Question

I am using the following code and it draws a triangle on the screen. But for some reason it displays the below triangle.

Here is the code:

// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code

    CGMutablePathRef path = CGPathCreateMutable(); 
    CGPathMoveToPoint(path,NULL,10.0f, 100.0f); 
    CGPathAddLineToPoint(path,NULL,100.0f,10.0f); 
    CGPathAddLineToPoint(path,NULL,100.0f,100.0f);
    CGPathAddLineToPoint(path,NULL,100.0f,100.0f);
    CGPathCloseSubpath(path); 
    CGContextRef ctx = UIGraphicsGetCurrentContext(); 
    CGContextSetFillColorWithColor(ctx, [UIColor blueColor].CGColor); 
    CGContextAddPath(ctx, path); 
    CGContextFillPath(ctx); 


}

and here is the result:

      /|
     / |
    /  |
   /   |
  /    |
 /__ __|

But when I draw it on paper I came to this diagram:

   ___________
   \         | 
    \        | 
     \       |
      \      |
       \\     |
          \
            \|

(well you get the idea right)

What am I missing! Maybe I am not thinking straight. x is horizonal and y is vertical. (0,0) is the origin right.

Answer 1

The Y axis is flipped in the context you are drawing into. You can either adjust for that in your math or apply a affine transformation to flip it back

Answer 2

On iPhone, (0,0) is in the lower left corner: http://developer.apple.com/iphone/library/documentation/GraphicsImaging/Conceptual/drawingwithquartz2d/dq_context/dq_context.html#//apple_ref/doc/uid/TP30001066-CH203-SW9