Rect Method
Class THtml5Canvas2D
procedure Rect(Left: Double; Top: Double; Width: Double; Height: Double);
The Rect method creates a rectangle.
Tip:
Use the Stroke or the Fill method to actually draw the rectangle on the canvas.
Parameter Values
The x-coordinate of the upper-left corner of the rectangle.
The y-coordinate of the upper-left corner of the rectangle.
The width of the rectangle, in pixels.
The height of the rectangle, in pixels.
Examples:
Draw a 150*100 pixels rectangle:
Canvas.Rect(10,10,150,100);
Canvas.Stroke;
Create three rectangles with the Rect method:
// Red rectangle
Canvas.BeginPath;
Canvas.LineWidth := 6;
Canvas.StrokeStyle := clRed;
Canvas.Rect(5,5,290,140);
Canvas.Stroke;
// Green rectangle
Canvas.BeginPath;
Canvas.LineWidth := 4;
Canvas.StrokeStyle := clGreen;
Canvas.Rect(30,30,50,50);
Canvas.Stroke;
// Blue rectangle
Canvas.BeginPath;
Canvas.LineWidth := 10;
Canvas.StrokeStyle := clBlue;
Canvas.Rect(50,50,150,80);
Canvas.Stroke;