Drawing Rectangles

Rectangles are one of the most basic and versatile shapes you can draw with FxCanvas. They're essential for creating backgrounds, borders, buttons, and many other UI elements. FxCanvas provides several ways to work with rectangles, from simple solid shapes to complex compositions with styles and effects.

Basic Filled Rectangles

The simplest way to draw a rectangle is as a solid, filled shape. This is perfect for backgrounds, panels, or any area that needs a uniform color.

To draw a filled rectangle, you specify its position and size, and FxCanvas fills it with the current fill style. The method signature is fillRect(x, y, width, height), where:

• x and y are the coordinates of the top-left corner
• width and height define the rectangle's dimensions

import { CanvasEncoder, Color } from 'fxcanvas';

// Create canvas
const canvas = new CanvasEncoder(400, 200);

// Set the fill color to red
canvas.setFillStyle(new Color(255, 0, 0));

// Draw a 200x100 rectangle starting at (50, 50)
canvas.fillRect(50, 50, 200, 100);

This encodes a solid red rectangle operation. The rectangle will be rendered when you generate the final image via API.

Rectangles can use any color style; see Working with Colors.

Rectangle Outlines

Sometimes you want just the border of a rectangle, not the filled interior. This is useful for frames, selection indicators, or decorative elements.

Drawing an outline uses the strokeRect(x, y, width, height) method with the same parameters as fillRect. The outline's appearance depends on the current stroke settings.

// Configure the outline: blue color, 2 pixels wide
canvas.setStrokeStyle(new Color(0, 0, 255));
canvas.setLineWidth(2);

// Draw the rectangle outline
canvas.strokeRect(50, 50, 200, 100);

The outline is encoded using the specified color and thickness, creating a border around the rectangle's perimeter.

Rectangles are commonly used for clipping; see Clipping and Masking for details.

Strokes offer many customization options; see Working with Strokes.

Drawing Rounded Rectangles

Rounded rectangles add visual appeal with smooth, curved corners instead of sharp edges. This is perfect for modern UI elements like buttons and panels.

FxCanvas provides the roundRect(x, y, width, height, radii) method for drawing rounded rectangles directly:

// Uniform corner radius
canvas.fillStyle = 'lightblue';
canvas.fillRoundRect(50, 50, 200, 100, 20);  // 20px radius on all corners

For different corner radii, pass an array:

// Different radii for each corner [top-left, top-right, bottom-right, bottom-left]
canvas.strokeStyle = 'darkblue';
canvas.strokeRoundRect(50, 50, 200, 100, [10, 20, 30, 40]);

You can also add rounded rectangles to paths for more complex shapes:

canvas.beginPath();
canvas.roundRect(50, 50, 200, 100, 15);
canvas.fill();

For more on using roundRect in paths, see Drawing Paths.

Clearing Rectangular Areas

FxCanvas allows you to erase parts of the canvas by making rectangular areas transparent. This is essential for creating cutouts or overlays.

The clearRect(x, y, width, height) method removes all content in the specified area, making it transparent.

// Clear a 200x100 area starting at (50, 50)
canvas.clearRect(50, 50, 200, 100);

This method is useful for creating transparent regions or cutouts in your composition.

Combining Fill and Stroke

For more complex rectangle designs, you can combine filled interiors with outlined borders. This creates rectangles with both solid content and visible edges.

// Set up both fill and stroke
canvas.setFillStyle(new Color(173, 216, 230)); // lightblue
canvas.setStrokeStyle(new Color(0, 0, 139));   // darkblue
canvas.setLineWidth(3);

// Draw the filled rectangle first
canvas.fillRect(50, 50, 200, 100);

// Then add the outline
canvas.strokeRect(50, 50, 200, 100);

The order matters: drawing the fill first ensures the outline appears on top. This technique is great for creating buttons, panels, or highlighted areas.

Transformations and Positioning

Rectangles can be drawn with transformations applied, allowing for rotation, scaling, and repositioning. FxCanvas uses a transformation matrix that affects all drawing operations.

// Save the current transformation state
canvas.save();

// Move the origin to (100, 100) and rotate 45 degrees
canvas.translate(100, 100);
canvas.rotate(Math.PI / 4);

// Draw a rectangle relative to the new origin
canvas.fillRect(-50, -25, 100, 50);

// Restore the original transformation
canvas.restore();

Transformations let you create rotated rectangles, scaled shapes, or position rectangles relative to different points. Always save and restore the canvas state when using transformations to avoid affecting other drawings.

Clipping to Rectangles

You can restrict drawing to within a rectangular area using clipping. This creates a "viewport" where only content inside the rectangle is visible.

// Define the clipping rectangle
canvas.beginPath();
canvas.rect(50, 50, 200, 100); // or roundrect
canvas.clip();

// Now only drawing inside this rectangle will be visible
canvas.fillRect(0, 0, 300, 200); // Only the clipped portion appears

Clipping is powerful for creating masks, cropping effects, or limiting the scope of complex drawings. Remember that clipping affects all subsequent drawing operations until you restore the canvas state.

Rectangles are one of the most efficient shapes to encode and render in FxCanvas.