Rectangle

Another graphical command is Rectangle, with which we draw rectangles. It has 4 input parameters: they are integer and indicate the coordinates of the two points - the upper left and the opposed, i. e. bottom right corner (Figure 24). With these two point, the rectangle is unambiguous intended. These coordinates must always be integer and the unit is a pixel.

Let´s draw a rectangle with the coordinates of the upper left corner [30, 50] and the right bottom corner [200, 150] where the first number indicates the X coordinate and the second the Y coordinate.

Figure 24: Rectangle Coordinates

If we have not changed the settings so far, the rectangle is drawn with a black borderline, pen thickness 1 and filled with a white colour of the Brush. We can change these features while obeying the syntax of the language. If we draw the rectangle first and then we would want to change its properties, after the first click on the button the rectangle will be drawn with the pre-set values and these settings will change after the second click on the button.

Let´s draw a rectangle with a blue borderline, the pen thickness 15 and filled with a red colour (Figure 25):

Figure 25: Rectangle Commands

So far we have explained what the words Image1 and Canvas mean. Now we need to know also the rest of the command.

We have already explained the first line of the command - an erasing of the graphic area.
The next line of the command means that we will write (draw) on the Canvas with a Pen which colour will be blue (clBlue).
In the next row, we also set the Pen settings but this time we will set its width (or thickness).
Before we will draw a rectangle, we will set its colour by changing the Brush settings. This time we will assign the red colour (clRed).
As the last step, we will draw the rectangle with parameters (X and Y coordinates). The outcome of the program can be seen in Figure 26:

Figure 26: Rectangle drawn on a graphic area

Other predefined colours in Lazarus include, for example clBlack, clGreen, clRed, clBlue, clYellow, clWhite, clGray, clLime, clAqua, clFuchsia, clMaroon, clSilver, clSkyBlue and others.

Colour is only one of the features of the Pen and the Brush. We can also set their style.

The Pen style (Pen.Style) can acquire following values:

psSolid - full line
psDash - dashed line
psDot - dotted line
their combination - psDashDot, psDashDotDot, psClear, etc.

The Brush style (Brush.Style) can acquire following values:

bsSolid - full fill
bsHorizontal - horizontal lines
bsVertical - vertical lines
bsBDiagonal - hatching tilted to the right
bsFDiagonal - hatching tilted to the left
bsCross - crosshatching
bsDiagCross - tilted crosshatching
bsClear - no fill

Let´s draw several rectangles with a single button that will vary in thickness, colour and pen style (Figure 27).

Figure 27: Drawing multiple rectangles using a single button