Skip to main content

Rectangle

The rectangle is one of the most fundamental shapes in the CanvasPainter library. It can be drawn in different ways depending on the use case, such as using the top-left corner as a reference point or using the center. This chapter will guide you through setting up and drawing rectangles using CanvasPainter, showcasing different configurations and illustrating the rendered output.

Usage

A new rectangle shape is created using the Rectangle constructor.

import { Rectangle } from '@avolutions/canvas-painter';

const rectangle = new Rectangle(
x, // The x-coordinate of the rectangle's position.
y, // The y-coordinate of the rectangle's position.
width, // The width of the rectangle.
height, // The height of the rectangle.
rotation, // (optional) The initial rotation of the rectangle in degrees clockwise.
style, // (optional) Style properties for this rectangle.
options // (optional) Options for this rectangle.
);

The detailed API documentation for Rectangle can be found here.

Draw a basic rectangle

The simplest use case is drawing a rectangle by specifying the x, y, width and height. By default x and y specify the top-left corner of the rectangle.

import { Canvas, Rectangle } from '@avolutions/canvas-painter';

const canvas = Canvas.init('myCanvas');

// x, y, width, height
const rectangle = new Rectangle(150, 75, 100, 50)

canvas.draw(rectangle);

Rendered Output:

Rectangle

In this example we draw a rectangle with a size of 100 x 50 pixels where the top-left corner is at x = 150 and y = 75.

Draw a centered rectangle

In some cases, you might want to center the rectangle on a specific point. The Rectangle class supports this by allowing the center to be passed instead of the top-left corner.

import { Canvas, Rectangle } from '@avolutions/canvas-painter';

const canvas = Canvas.init('myCanvas');

// x, y, width, height, rotation, style, options
const rectangle = new Rectangle(150, 75, 100, 50, 0, null, { centered: true });

canvas.draw(rectangle);

Rendered Output:

Centered Rectangle

In this example we draw a rectangle with a size of 100 x 50 pixels where the center is at x = 150 and y = 75 by setting the option centered.

Draw a rotated rectangle

In some cases, you may need to draw rectangles at angles other than the default 0 degrees. This can easily be archived by setting the rotation via constructor. The rotation is defined as degrees in clockwise direction. To rotate counter clockwise just pass a negative value. If centered option is specified the rectangle is rotated around the center and not top-left corner.

import { Canvas, Rectangle } from '@avolutions/canvas-painter';

const canvas = Canvas.init('myCanvas');

// x, y, width, height, rotation
const rectangle = new Rectangle(150, 30, 100, 50, 45);

canvas.draw(rectangle);

Rendered Output:

Rotated Rectangle

In this example, the rectangle is rotated 45 degrees clockwise around its top-left corner.

Modify a rectangle

In this chapter, you'll learn how to update a rectangle's properties such as its width, height, position, rotation and style using the setters provided by CanvasPainter. Additionally, you'll explore how to use methods like setSize(), resize(), move(), and rotate() to dynamically update the rectangle's attributes.

There are two different ways to modify the rectangle definition:

  1. Set the properties directly to a new value
  2. Using helper methods to modify the properties by a given delta
import { Canvas, Rectangle } from '@avolutions/canvas-painter';

const canvas = Canvas.init('myCanvas');

// x, y, width, height
const rectangle = new Rectangle(150, 100, 100, 50);

// Properties
rectangle.width = 50; // Set width to 50px
rectangle.height = 25; // Set height to 25px

// Methods
rectangle.setSize(50, 25); // Set width to 50px and height to 25px

Available properties

PropertyDescriptionExample
widthSets the width of the rectangle.rectangle.width = 50;
heightSets the height of the rectangle.rectangle.height = 50;
positionSets the position (x and/or y) of the rectangle.rectangle.position = { x: 50, y: 50 };
rectangle.position.x = 50
rotationSets the rotation of the rectangle in degrees clockwise.rectangle.rotation = 45;
styleSets the style attributes of the rectangle.rectangle.style = { color: "red" };
rectangle.style.color = "red";
optionsSets the options attributes of the rectangle.rectangle.options = { centered: false };
rectangle.options.centered = false;

Available methods

MethodDescriptionExample
setSize()Updates the size of the rectangle by setting new width and height values.rectangle.setSize(50, 50);
resize()Resizes the rectangle by adjusting the current width and height by delta values.rectangle.resize(10, -5);
move()Moves the rectangle by adjusting the current position by delta values.rectangle.move(20, -10);
rotate()Rotates the rectangle by adjusting its current angle.rectangle.rotate(45);

Get properties of a rectangle

In addition to manipulating a rectangle's properties, CanvasPainter allows you to retrieve the current values of its attributes such as width, height, position, rotation and style.

import { Canvas, Rectangle } from '@avolutions/canvas-painter';

const canvas = Canvas.init('myCanvas');

// x, y, width, height
const rectangle = new Rectangle(150, 100, 100, 50);

const width = rectangle.width; // Get current width: 150

Available properties

PropertyDescriptionExample
widthGets the width of the rectangle as number.const width = rectangle.width;
heightGets the height of the rectangle as number.const height = rectangle.height;
positionGets an Point object representing the position of the rectangle.const position = rectangle.position;
const x = position.x;
angleGets an Angle object representing the rotation angle of the rectangle.const angle = rectangle.angle;
const radians = angle.radians;
rotationGets the rotation of the rectangle as number indication degrees in clockwise direction.const rotation = rectangle.rotation;
styleGets a RectangleStyle object representing the style of the rectangle.const style = rectangle.style;
const color = rectangle.style.color;
optionsGets a RectangleOptions object representing the options of the rectangle.const options = rectangle.options;
const centered = rectangle.options.centered;

Serialize a rectangle

The Rectangle shape in CanvasPainter.js can be serialized into both array and JSON formats using the toArray() and toJson() methods. These methods allow you to easily convert the rectangle’s definition into standard formats for saving, exporting, or transmitting data.

Serialize to array

The toArray method converts the rectangle's definition into an array. This can be useful when you need a lightweight representation of the point, or when you need to work with libraries or functions that expect data in array format.

const rectangle = new Rectangle(10, 10, 20, 20);
rectangle.toArray();

This will give you an array in this format:

[
[x, y], // position
width, // width
height // height
]

Serialize to JSON

The toJson() method for a rectangle returns a structured JSON string that includes the rectangle’s definition. This format is ideal for working with APIs or saving to structured data formats.

const rectangle = new Rectangle(10, 10, 20, 20);
rectangle.toJson();

This will give you a JSON string in this format:

{
position: {
x: number,
y: number
},
width: number,
height: number
}

Style

The following table is showing all available rectangle styles and the default values if no value was provided explicit.

StyleTypeDefaultExplanation
borderColorstring'#000000'Defines the color of rectangles border. Border is only shown if borderColor is provided and borderWidth is greater 0.
borderWidthnumber0Defines the width of rectangles border. Border is only shown if borderColor is provided and borderWidth is greater 0.
colorstring'#000000' (black)Sets the default fill color for the rectangle.
cursorCursorCursor.DefaultSpecifies a custom cursor style for the shape. Overrides the default cursor when interacting with the shape.

You can specify styles for different shape states by providing a unique set of properties under each state (e.g., hover, selected, active). Each state-specific style overrides the default only while the shape is in that state.

{
borderColor: '#000000',
borderWidth: 0,
color: '#000000',
cursor: Cursor.Default,
hover: {
borderColor: '#000000',
borderWidth: 0,
color: '#000000',
cursor: Cursor.Default
}
}

Options

The following table is showing all available rectangle options and the default values if no value was provided explicit.

OptionTypeDefaultExplanation
centeredbooleanfalseIf true, the rectangle will be centered at the provided position.
If false or undefined, the rectangle will be positioned from the top-left corner.
visiblebooleantrueIf true, the rectangle will be visible.
If false or undefined, the rectangle will be hidden.
{
centered: false,
visible: true
}