Off-screen Canvas Usage with Graphics2D

Suppose you need a component that behaves much like a JLabel, showing one line of text, except that the text appears in mirror-reversed form. No standard Swing component does this. When the component you need does not exist, you build one yourself. This article follows one such example, a class called MirrorText, and uses it to show how a custom component is assembled, how its content is painted, and where a mistake would reveal itself.

The MirrorText class is defined as a subclass of JPanel. That single decision determines most of what the class inherits. Because it extends JPanel, it gets the panel's ability to be placed in a layout, its size handling, and its use of colors and fonts. The class then adds only what is specific to it: a constructor that receives the text to show, and a setText() method that replaces that text later.

The class also respects the standard appearance settings of the panel. The source states that MirrorText uses any background color, foreground color, and font set on the JPanel. It does not need its own color or font fields for these. It reads them from the panel it extends, so a caller who sets a font on the component changes the text's font without any extra work in the class.

Everything the user sees inside a custom component comes from one method: paintComponent(). MirrorText overrides this method to draw its text mirror-reversed, centered within the available area. Centering is not guessed. The method uses information from a FontMetrics object, which describes how large the text will be when drawn in the current font, so the text can be positioned in the middle of the component.

Because the visible output of the component is produced entirely inside paintComponent(), any question about what appears on screen can be answered by asking what this method does, in order. The method does not simply write text to the screen. It calls the steps that prepare an image and then copy that image into the visible area. Each of those steps is a place where the final result can be correct or incorrect.

The reversal is achieved with an off-screen canvas. An off-screen canvas is an image that exists in memory but is not shown to the user. The text is first drawn onto this image in the ordinary way, exactly as if the text were being drawn normally. Nothing about the text is reversed during this first step. The reversal happens later, in the copy.

The movement is one-way. Text goes into the hidden image, and the finished image is then handed to the screen by a single drawing call. The component never draws the reversed text directly. It draws an image that was prepared earlier, and the copy operation is the only place where the image's orientation is changed.

The copy step is performed by one command. In it, OSC names the off-screen canvas, and width and height give the size of both the component and the off-screen canvas, which are the same size. The remaining information is in the corners. The drawImage method, as used here, takes a destination rectangle followed by a source rectangle, each given by two corners. Read the arguments in pairs.

The source covers the whole off-screen image from left to right. The destination runs in the opposite direction, from the right edge back to the left edge. Copying an image into a region whose horizontal corners are swapped is what makes the result a mirror image. The vertical corners are not swapped, so the text keeps its top-to-bottom orientation and only the left-right order changes.

A custom component has several places where its output can go wrong, and the pipeline above tells you where to look. Because the visible result is produced by a copy from an intermediate image, a mismatch between what you expect and what you see usually comes from one of three stages: the drawing into the off-screen canvas, the copy command, or the painting method that calls them. The source identifies the copy arguments as the first place to look when the output is wrong.

Read the diagram as a chain of dependence. The paint method calls the drawing into the canvas, then calls the copy. Whatever the copy receives determines the final orientation. If the corner arguments are not swapped, the text appears in normal order even though the drawing itself was correct. If the drawing into the canvas was wrong, the copy faithfully carries that error to the screen. This is why the copy command is the most likely origin of a reversal-specific mistake, while the canvas drawing is the most likely origin of a mistake in the text's content or position.