Drawing Lines and Pixels with Graphics

Suppose you want to draw a border around a component, the rectangular area a program paints on screen. The natural first idea is to ask for a rectangle whose width and height match the component's size, using getWidth() and getHeight(). Both values feel like the right numbers to pass in, and it seems reasonable that a rectangle of width 100 and height 50 would cover exactly 100 by 50 pixels.

Both of those assumptions lead to trouble. The border ends up with its right and bottom edges missing or misplaced. This article traces what the drawing methods of the Graphics class actually paint, one pixel at a time, so you can see where the missing edge goes and how to fix it. Predicting the result before reading on is a good habit here, because the answer is not what the numbers suggest.

Every method in this article belongs to the Graphics class, so each one is called through a Graphics object. The examples refer to that object as g, but the programmer chooses the real name of the graphics context.

The drawRect method draws the outline of a rectangle. Its upper left corner sits at the point (x, y), and its width and height are the values you pass in. That description is only part of the story. The outline is drawn with the same pen used for lines, and that pen colors pixels one pixel to the right of the geometric line and one pixel below it.

The result is that the outline's real width is the width you passed in plus one, and its real height is the height you passed in plus one. The extra pixel column lies past the right edge, and the extra pixel row lies past the bottom edge. The pixels you see extend one beyond the numbers you typed. This is the key correction to the belief from the opening section.

Read the diagram below as a strip of pixel columns. Each box is one column, numbered from the left. Passing a width of 10 with x equal to 0 paints the outline across columns 0 through 10, which is eleven columns in total. Column 10 is the extra column the pen adds beyond the width you requested.

The four methods drawString, drawLine, drawRect, and drawOval share one pattern. Each is a method of the Graphics object, and each takes integer coordinates or sizes. The table below summarizes what each argument controls. The entries for drawRect, drawLine, and drawString follow directly from the source's descriptions. The source pack does not spell out the individual arguments of drawOval, so that row is marked accordingly.

The drawLine method draws a line from the point (x1, y1) to the point (x2, y2). The pen that draws it extends one pixel to the right and one pixel down from the point where the pen sits. The source also notes that coordinates refer to the lines between pixels rather than to the pixels themselves. Keeping that picture in mind explains why a single point is not invisible.

The drawString method draws text using the current color and font of the graphics context. The x coordinate marks the left end of the string. The y coordinate marks the baseline, the horizontal line on which the characters rest. Some characters, such as the tail of a lowercase y or g, extend below the baseline, which is why the y value is not the top of the text.

The source gives the standard fix for drawing a border around a component. Subtract one from the width and height. The drawn outline's extra pixel column and row then land on the last pixel inside the component, rather than past its edge. The source's example is shown below.

All of the drawing commands in this group respect the boundaries of the component. Any drawing done outside those boundaries is ignored. This is the reason the getWidth() - 1 adjustment matters: pixels placed past the component's right or bottom edge are simply not shown. The result is that a shape extending past the edge is partly drawn, with the parts inside the boundary kept and the parts outside discarded.

The before-and-after view shows the difference between the area you asked for and the area you actually see. The request reaches column 150, but only the columns from 0 through 99 belong to the component, so the rest is discarded. Your intended shape is cut short at the boundary, and no error is reported.