Draw Circle Triangle and Rectangle in iPad


This is the very simple tutorial. In this tutorial we will see how to draw Circle, Triangle and  Rectangle in the iPad.

Step 1: Create a Window base application using template. Give the application name “ThreeViews”.

Step 2: Xcode automatically creates the directory structure and adds essential frameworks to it. You can explore the directory structure to check out the content of the directory.

Step 3: We need to add  one UIView file in the project. Select classes-> New File -> Add ->Cocoa Touch Class -> Select Objective C class -> Subclass of -> UIView. Give the class name “CircleView”.

Step 4: Open the ThreeViewsAppDelegate.m file and make the following changes in the file:

[code lang=”objc”]
-(void)applicationDidFinishLaunching:(UIApplication *)application {

CircleView *view = [[CircleView alloc] initWithFrame:[window frame]];
[window addSubview:view];
[view release];

[window makeKeyAndVisible];



Step 5: Open the CicleView.m file and make the following changes in the drawRect: method.

[code lang=”objc”]
– (void)drawRect:(CGRect)rect {
CGContextRef contextRef = UIGraphicsGetCurrentContext();

CGContextSetRGBFillColor(contextRef, 0, 0, 255, 0.1);
CGContextSetRGBStrokeColor(contextRef, 0, 0, 255, 0.5);

// Draw a circle (filled)
CGContextFillEllipseInRect(contextRef, CGRectMake(100, 100, 25, 25));

// Draw a circle (border only)
CGContextStrokeEllipseInRect(contextRef, CGRectMake(100, 100, 25, 25));

// Get the graphics context and clear it
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextClearRect(ctx, rect);

// Draw a green solid circle
CGContextSetRGBFillColor(ctx, 0, 255, 0, 1);
CGContextFillEllipseInRect(ctx, CGRectMake(100, 100, 25, 25));

// Draw a yellow hollow rectangle
CGContextSetRGBStrokeColor(ctx, 255, 255, 0, 1);
CGContextStrokeRect(ctx, CGRectMake(195, 195, 60, 60));

// Draw a purple triangle with using lines
CGContextSetRGBStrokeColor(ctx, 255, 0, 255, 1);
CGPoint points[6] = { CGPointMake(100, 200), CGPointMake(150, 250),
CGPointMake(150, 250), CGPointMake(50, 250),
CGPointMake(50, 250), CGPointMake(100, 200) };
CGContextStrokeLineSegments(ctx, points, 6);



Step 6: Now compile and run the application in the Simulator.

You can Download SourceCode from here ThreeViews

Comments 10

  1. No need to import CircleView.h file in the ThreeViewsAppDelegate.h file, only define in the ThreeViewsAppDelegate.m file.

  2. > CGContextRef ctx = UIGraphicsGetCurrentContext();

    I get no warning, no errors… but CGContextRef is always NULL.

    Why are both of these needed, instead of just 1:
    > CGContextRef contextRef = UIGraphicsGetCurrentContext();
    > CGContextRef ctx = UIGraphicsGetCurrentContext();
    Do they point to 2 different things?

  3. You’d better use CGContextAddArc() with startAngle=0 and endAngle=2*pi if you want a real round circle. Sample code:


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">