title: Precise pixel grid overlay in Core Graphics?
body: <p>In my experiments with creating a pixel-centered image editor I've been trying to draw a precise grid overlay to help guide users when trying to access certain pixels. However, the grid I draw isn't very even, especially at smaller sizes. It's a regular pattern of one slightly larger column for every few normal columns, so I think it's a rounding issue, but I can't see it in my code. Here's my code:</p>
  
  <pre><code>    - (void)drawRect:(NSRect)dirtyRect
  {
      context = [[NSGraphicsContext currentContext] graphicsPort];
      CGContextAddRect(context, NSRectToCGRect(self.bounds));
      CGContextSetRGBStrokeColor(context, 1.0f, 0.0f, 0.0f, 1.0f);
      CGContextStrokePath(context);
      CGContextSetInterpolationQuality(context, kCGInterpolationNone);
      CGContextSetShouldAntialias(context, NO);
  
      if (image)
      {
  
          NSRect imageRect = NSZeroRect;
          imageRect.size = CGImageGetSize([image CGImage]);
          drawRect = [self bounds];
          NSRect viewRect = drawRect;
          CGFloat aspectRatio = imageRect.size.width / imageRect.size.height;
          if (viewRect.size.width / viewRect.size.height &lt;= aspectRatio)
          {
              drawRect.size.width = viewRect.size.width;
              drawRect.size.height = imageRect.size.height * (viewRect.size.width / imageRect.size.width);
          }
          else
          {
              drawRect.size.height = viewRect.size.height;
              drawRect.size.width = imageRect.size.width * (viewRect.size.height / imageRect.size.height);
          }
  
          drawRect.origin.x += (viewRect.size.width - drawRect.size.width) / 2.0;
          drawRect.origin.y += (viewRect.size.height - drawRect.size.height) / 2.0;
  
          CGContextDrawImage(context, drawRect, [image CGImage]);
  
          if (showPixelGrid)
          {
              //Draw grid by creating start and end points for vertical and horizontal lines.
              //FIXME: Grid is uneven, especially at smaller sizes. 
              CGContextSetStrokeColorWithColor(context, CGColorGetConstantColor(kCGColorBlack));
              CGContextAddRect(context, drawRect);
              CGContextStrokePath(context);
              NSUInteger numXPoints = (NSUInteger)imageRect.size.width * 2;
              NSUInteger numYPoints = (NSUInteger)imageRect.size.height * 2;
              CGPoint xPoints[numXPoints];
              CGPoint yPoints[numYPoints];
              CGPoint startPoint;
              CGPoint endPoint;
              CGFloat widthRatio = drawRect.size.width / imageRect.size.width;
              CGFloat heightRatio = drawRect.size.height / imageRect.size.height;
              startPoint.x  = drawRect.origin.x;
              startPoint.y = drawRect.origin.y;
              endPoint.x = drawRect.origin.x;
              endPoint.y = drawRect.size.height + drawRect.origin.y;
              for (NSUInteger i = 0; i &lt; numXPoints; i += 2)
              {
                  startPoint.x += widthRatio;
                  endPoint.x += widthRatio;
                  xPoints[i] = startPoint;
                  xPoints[i + 1] = endPoint;
              }
              startPoint.x  = drawRect.origin.x;
              startPoint.y = drawRect.origin.y;
              endPoint.x = drawRect.size.width + drawRect.origin.x;
              endPoint.y = drawRect.origin.y;
              for (NSUInteger i = 0; i &lt; numYPoints; i += 2)
              {
                  startPoint.y += heightRatio;
                  endPoint.y += heightRatio;
                  yPoints[i] = startPoint;
                  yPoints[i + 1] = endPoint;
              }
              CGContextStrokeLineSegments(context, xPoints, numXPoints);
              CGContextStrokeLineSegments(context, yPoints, numYPoints);
          }
      }
  
  }
  </code></pre>
  
  <p>Any ideas? </p>