Graphics and Custom Drawing

3 min read

In visual programming (Lazarus/Delphi), all visual components, including forms, have a dedicated surface for custom drawing called the Canvas. Understanding the Canvas is essential for creating unique graphical output.

1. The Graphics Coordinate System

The Canvas uses a standard 2D coordinate system:

Origin: The point $(0, 0)$ is always the top-left corner of the drawing surface (the component or form).
X-axis: Increases to the right.
Y-axis: Increases downwards.

The coordinates are measured in pixels.

2. The Canvas Object (`TCanvas`)

Every visual component (like TForm, TPanel, or TImage) has a Canvas property, which is an object of type TCanvas. This object contains the drawing methods and properties that define how the drawing is done.

A. Key Drawing Tools (Pen and Brush)

Before drawing, you must configure the tools used by the canvas:

Tool	Property	Class	Purpose	Key Properties
Pen	`Canvas.Pen`	`TPen`	Defines the outline used for lines, shapes, and borders.	`Color`, `Width`, `Style` (e.g., solid, dashed)
Brush	`Canvas.Brush`	`TBrush`	Defines the fill used for solid shapes (rectangles, ellipses).	`Color`, `Style` (e.g., solid, patterned)

procedure TForm1.ButtonDrawClick(Sender: TObject);
begin
  // Set up the Pen (for lines/borders)
  Form1.Canvas.Pen.Color := clRed;
  Form1.Canvas.Pen.Width := 3;
  
  // Set up the Brush (for fill)
  Form1.Canvas.Brush.Color := clYellow;
  
  // The Canvas object itself is used for the drawing commands
  // ... drawing commands here ...
end;

3. Basic Drawing Commands

TCanvas provides methods for drawing points, lines, and shapes:

Method	Purpose	Example
`MoveTo(X, Y)`	Sets the current drawing position without drawing anything.	`Canvas.MoveTo(10, 10);`
`LineTo(X, Y)`	Draws a line from the current position to the new position $(X, Y)$.	`Canvas.LineTo(100, 100);`
`Rectangle(X1, Y1, X2, Y2)`	Draws a filled rectangle bounded by the top-left $(X1, Y1)$ and bottom-right $(X2, Y2)$.	`Canvas.Rectangle(50, 50, 150, 150);`
`Ellipse(X1, Y1, X2, Y2)`	Draws a filled ellipse (or circle) inside the defined rectangle bounds.	`Canvas.Ellipse(50, 50, 150, 150);`
`Pixels[X, Y]`	Property that gets or sets the color of a single pixel at position $(X, Y)$.	`Canvas.Pixels[20, 20] := clBlue;`

Example: Drawing a Triangle

begin
  // Draw an outline triangle
  Canvas.MoveTo(10, 100);
  Canvas.LineTo(100, 10);
  Canvas.LineTo(190, 100);
  Canvas.LineTo(10, 100); // Close the triangle
end;

4. Drawing Text

The TextOut method is used to draw text directly onto the canvas. Text appearance is controlled by the Canvas.Font property.

procedure TForm1.DrawText;
begin
  // Set up the Font
  Canvas.Font.Name := 'Arial';
  Canvas.Font.Size := 14;
  Canvas.Font.Color := clBlue;
  Canvas.Font.Style := [fsBold]; // Use a Set for font styles
  
  // Draw the text at (10, 10)
  Canvas.TextOut(10, 10, 'Hello Graphics!');
end;

5. Repainting and Events

Drawing commands should ideally not be placed directly in a button’s OnClick event, but rather in the component’s dedicated Paint event.

OnPaint Event: This event fires whenever the component needs to be redrawn (e.g., when the window is restored, resized, or uncovered by another window).
Repaint Method: Call the Component.Repaint method (e.g., Form1.Repaint;) to manually force the OnPaint event to fire and redraw the component. This is how you update a dynamic display (like an animation frame).

procedure TForm1.FormPaint(Sender: TObject);
begin
  // ALL drawing logic belongs inside the OnPaint handler
  Canvas.Pen.Color := clBlack;
  Canvas.Rectangle(10, 10, 20, 20);
end;

procedure TForm1.Timer1Timer(Sender: TObject);
begin
  // If we change coordinates in the Timer, we must call Repaint
  // X := X + 1; 
  // Form1.Repaint; 
end;

What are your Feelings