Drawing around CGContextRef to remove pixelation

Question

Currently, I am having a graphical issue with drawing small dots.

I notice that in most professional Calendar applications, the events calendar indentifier is a small dot whose color is the events calendar color.

I am current at the point of my application where I need to draw a BETTER dot. Heres a photo of what I mean.

It may not be noticeable here but the colored dot is pretty pixelated when its on my phone. I would like to remove the pixelation.

I went through a tutorial from Ray Wenderlich's website: Ray Wenderlich Core Graphics.

Here is what I got out of it for drawing the dot:

UIGraphicsBeginImageContext(cell.imageViewPic.bounds.size);
CGContextRef contextRef = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(contextRef, [[event calendar] CGColor]);
CGContextFillEllipseInRect(contextRef,(CGRectMake (0.f, 0.f, cell.imageViewPic.bounds.size.width, cell.imageViewPic.bounds.size.height)));

UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
cell.imageViewPic.image = image;

So this actually implements the circle, but I added this to draw a small line around the circle to rid the pixelation but no go.

CGPoint startPoint = CGPointMake(cell.imageViewPic.frame.origin.x, cell.imageViewPic.frame.origin.y + cell.imageViewPic.frame.size.height - 1);
CGPoint endPoint = CGPointMake(cell.imageViewPic.frame.origin.x + cell.imageViewPic.frame.size.width - 1, cell.imageViewPic.frame.origin.y + cell.imageViewPic.frame.size.height - 1);
UIColor* color = [UIColor blackColor];
CGContextSaveGState(contextRef);
CGContextSetLineCap(contextRef, kCGLineCapSquare);
CGContextSetStrokeColorWithColor(contextRef, color.CGColor);
CGContextSetLineWidth(contextRef, 10.0);
CGContextMoveToPoint(contextRef, startPoint.x + 0.5, startPoint.y + 0.5);
CGContextAddLineToPoint(contextRef, endPoint.x + 0.5, endPoint.y + 0.5);
CGContextStrokePath(contextRef);
CGContextRestoreGState(contextRef);

All together looks like this...

UIGraphicsBeginImageContext(cell.imageViewPic.bounds.size);
CGContextRef contextRef = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(contextRef, [[event calendar] CGColor]);
CGContextFillEllipseInRect(contextRef,(CGRectMake (0.f, 0.f, cell.imageViewPic.bounds.size.width, cell.imageViewPic.bounds.size.height)));

CGPoint startPoint = CGPointMake(cell.imageViewPic.frame.origin.x, cell.imageViewPic.frame.origin.y + cell.imageViewPic.frame.size.height - 1);
CGPoint endPoint = CGPointMake(cell.imageViewPic.frame.origin.x + cell.imageViewPic.frame.size.width - 1, cell.imageViewPic.frame.origin.y + cell.imageViewPic.frame.size.height - 1);
UIColor* color = [UIColor blackColor];
CGContextSaveGState(contextRef);
CGContextSetLineCap(contextRef, kCGLineCapSquare);
CGContextSetStrokeColorWithColor(contextRef, color.CGColor);
CGContextSetLineWidth(contextRef, 10.0);
CGContextMoveToPoint(contextRef, startPoint.x + 0.5, startPoint.y + 0.5);
CGContextAddLineToPoint(contextRef, endPoint.x + 0.5, endPoint.y + 0.5);
CGContextStrokePath(contextRef);
CGContextRestoreGState(contextRef);

UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
cell.imageViewPic.image = image;

The circle is still drawn but there is no "stroke" being drawn.

If anyone would give some pointers on how this pixelation issue is solved, please post!

Answer 1

The pixelation is occurring because when you make the image context you don't take the screen scale into consideration. Your code should be something like this (note the 1st line):

UIGraphicsBeginImageContextWithOptions(cell.imageViewPic.bounds.size, NO, [UIScreen mainScreen].scale)
CGContextRef contextRef = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(contextRef, [[event calendar] CGColor]);
CGContextFillEllipseInRect(contextRef,(CGRectMake (0.f, 0.f, cell.imageViewPic.bounds.size.width, cell.imageViewPic.bounds.size.height)));

UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
cell.imageViewPic.image = image;

Update: As someone commented, you can pass in 0 instead of [UIScreen mainScreen].scale. The docs agree:

The scale factor to apply to the bitmap. If you specify a value of 0.0, the scale factor is set to the scale factor of the device’s main screen.

Answer 2

This is the same answer as @Christian Di Lorenzo.. But this is shorter at more straight forward.

Change This:

UIGraphicsBeginImageContext(cell.imageViewPic.bounds.size);

To this:

UIGraphicsBeginImageContextWithOptions(cell.imageViewPic.bounds.size, NO, [UIScreen mainScreen].scale);