Pixel behaviour of FillRectangle and DrawRectangle

Question

nearly every time I use Graphics.DrawRectangle or Graphics.FillRectangle (the int versions) I seem to miss the pixels on the right and

Answer 1

The difference in behavior is due to the somewhat counter intuitive fact that these two algorithms do completely different things.

DrawRectangle draws four lines in the shape of a box. FillRectangle produces a W*H clump of filled in pixels. From this it's easy to see the reason for the difference in behavior. Namely the wrongness of the assumption of similarity. Drawing four lines is quite different than producing a boxlike clump of pixels.

Answer 2

These methods work correctly, you just have to take into account effects of anti-aliasing and rounding.

First, turn on anti-aliasing to see everything (not only rounded result):

graphics.SmoothingMode = SmoothingMode.AntiAlias;

Now FillRectangle(10,10,10,10) will produce blurry result and DrawRectangle(10,10,10,10) will be sharp.

The blurry result means that you have pixel coordinates off-grid. If you need to call:

graphics.FillRectangle(9.5f, 9.5f, 10, 10);

to align top-left corner of the rectangle on grid.

The DrawRectangle is sharp because it uses Pen of width 1.0. So the line starts on the pixel center and goes 0.5 pixels in both directions, thus filling exactly 1 pixel.

Note that width and height are computed this way:

width = (right - left) = 19.5 - 9.5 = 10
height = (bottom - top) = ...

Notice that 19.5 is a right/bottom coordinate of the rectangle also aligned on the grid and the result is a whole number.

You can use different formula:

width2 = (right - left + 1)

But this applies on rounded coordinates only, since the smallest unit is 1 pixel. When working with GDI+ that uses anti-aliasing, be aware of the fact that the point has zero size and lies in the center of pixel (it is not the whole pixel).

Answer 3

The rectangle in both of the Graphics methods in your question is bounded by (x, y) in the upper left and (x + width - 1, y + height - 1) in the lower right. This is a consequence of specifying width and height, rather than the lower right point.

When you're calculating the width and height from two points, you have remember to include the origin pixel by adding 1 to the difference.

For example, say you want to fill a Rectangle from point (5, 5) to point (10, 20). The width of the rectangle is 6, not 5. The height of the rectangle is 16, not 15.