Canvas rectangle

Official Documentation

In Lazarus, the TCanvas class provides methods and properties for drawing on graphical surfaces such as forms and controls. One of the drawing methods available is Rectangle, which is used to draw a rectangle on the canvas. Here’s a detailed look at the Rectangle method, along with a list of TCanvas properties and methods relevant to drawing rectangles.

The Rectangle method of the TCanvas class is used to draw rectangles on a graphical surface. It uses the Brush and Pen properties to determine the fill and outline styles.

TCanvas.Rectangle Method

Method Signature:

procedure Rectangle(X1, Y1, X2, Y2: Integer);

Breakdown of the Signature

procedure:

• This keyword indicates that the following block of code is a procedure. A procedure is a subroutine that performs a task but does not return a value like a function. In some programming languages, the term "procedure" is used interchangeably with "function," though the latter often implies that a value is returned.

Rectangle:

• This is the name of the procedure. It signifies that the procedure is intended to work with rectangles, likely performing operations such as drawing or calculating properties related to rectangles.

- Parameters:

The parameters listed in parentheses are the inputs that the procedure accepts. In this case, the procedure Rectangle takes four parameters: X1, Y1, X2, and Y2.

• X1, Y1, X2, Y2: These are the names of the parameters. They typically represent coordinates or dimensions related to the rectangle.
• X1 and Y1 could represent the coordinates of one corner of the rectangle.
• X2 and Y2 could represent the coordinates of the opposite corner.
• Integer: This specifies the data type of each parameter. Here, Integer indicates that all four parameters are integers. This is common in many programming languages to ensure that the values passed to the procedure are whole numbers.

Description:

Draws a rectangle on the canvas.  

Parameters:

• X1, Y1: Coordinates of the upper-left corner of the rectangle.
• X2, Y2: Coordinates of the lower-right corner of the rectangle.

Usage Example 1:

procedure TForm1.FormPaint(Sender: TObject);
begin
  Canvas.Rectangle(10, 10, 100, 100);
end;

This example draws a rectangle with its upper-left corner at (10, 10) and its lower-right corner at (100, 100) on the form's canvas.

Why is the rectangle white? And why does it have a black border?
The appearance of the rectangle is determined by the Brush and Pen properties of the Canvas.The default Brush and Pen properties can be found using:

// Retrieve the current pen color
ShowMessage('Pen Color: ' + ColorToString(Canvas.Pen.Color));

// Retrieve the current brush color
ShowMessage('Brush Color: ' + ColorToString(Canvas.Brush.Color));

Usage Example 2: Another example which draws a red rectangle with blue dotted border

procedure TForm1.FormPaint(Sender: TObject);
begin

 Canvas.Brush.Style:=bsSolid;
 Canvas.Pen.Style  :=psDot;
 Canvas.Pen.Width  :=2;

 Canvas.Brush.Color:=clRed;
 Canvas.Pen.Color  :=clBlue;

 Canvas.Rectangle(10,10,100,100);
end;

The brush styles available to you are:

The pen styles available to you are:

See the "pen_brush" sample project in the "examples" folder of the Lazarus installation for how to create custom patterns.

Usage Example 3:

There is also an overloaded version of the Rectangle method which accepts a single TRect argument rather than individual x1, y1, x2, y2 arguments.This example draws a rectangle on the upper-right corner of the form's canvas.

procedure TForm1.FormPaint(Sender: TObject);
var
  R: TRect;  // record containing the coordinates of the rectangle's left, top, right, bottom corners
begin

  // Calculate the corner points of the rectangle
  R.Left   := ClientWidth-110;
  R.Top    := 10;
  R.Right  := ClientWidth-10;
  R.Bottom := 100;

  Canvas.Rectangle(R);   // Draw the rectangle
end;                                        

Usage Example 4: Another example that demonstrates more properties

procedure TForm1.FormPaint(Sender: TObject);
var
  R: TRect;
begin
  // Filled rectangle, no border
  Canvas.Brush.Color := clBlue;
  Canvas.FillRect(10, 10, 100, 100);

  // Non-filled rectangle
  Canvas.Brush.Color := clRed;
  Canvas.FrameRect(110, 10, 200, 100);

  // Non-filled rectangle
  Canvas.Pen.Color := clGreen;
  Canvas.Frame(210, 10, 300, 100);

  // Ellipse (Circle)
  Canvas.Pen.Color := clBlue;
  Canvas.Pen.Style := psDash;
  Canvas.Brush.Color := clRed;
  Canvas.Brush.Style := bsCross;
  Canvas.Ellipse(10, 110, 100, 200);

  // Ellipse
  Canvas.Pen.style := psSolid;
  Canvas.Pen.Color := clBlue;
  Canvas.Brush.Color := clAqua;
  Canvas.Brush.Style := bsSolid;
  Canvas.RoundRect(110, 110, 200, 200, 20, 20);

  // Rectangle filled by vertical gradient
  Canvas.Pen.Style := psSolid;
  Canvas.GradientFill(Rect(210, 110, 300, 200), clRed, clYellow, gdVertical);

  // Raised empty 3D rectangle
  Canvas.Pen.Style := psSolid;
  R := Rect(10, 210, 100, 300);
  Canvas.Frame3D(R, clWhite, clGray, 3);

  // Sunken filled 3D-rectangle
  R := Rect(110, 210, 200, 300);
  Canvas.Frame3D(R, clGray, clWhite, 3);
  Canvas.Brush.Color := clSilver;
  Canvas.FillRect(R);
end;