Shapes & Objects

Design on Web provides a comprehensive set of shape primitives and object manipulation APIs. You can add, modify, select, and remove objects on the canvas programmatically.

Available Shapes

Shape Types

Name	Type	Default	Description
`rect`	`Shape`	—	Rectangle with optional corner radius
`circle`	`Shape`	—	Perfect circle defined by radius
`ellipse`	`Shape`	—	Ellipse with independent rx and ry
`triangle`	`Shape`	—	Equilateral triangle
`star`	`Shape`	—	Star with configurable points and radii
`polygon`	`Shape`	—	Regular polygon with configurable sides
`line`	`Shape`	—	Straight line between two points
`arrow`	`Shape`	—	Line with arrowhead at the end

Adding Shapes

Use engine.addShape(type, options) to add any shape to the canvas. All shapes support common properties like position, fill, stroke, and opacity.

// Add a rectangle
engine.addShape('rect', {
  left: 100,
  top: 100,
  width: 200,
  height: 150,
  fill: '#4f46e5',
  stroke: '#3730a3',
  strokeWidth: 2,
});

// Add a circle
engine.addShape('circle', {
  left: 300,
  top: 100,
  radius: 75,
  fill: '#ec4899',
});

// Add a triangle
engine.addShape('triangle', {
  left: 500,
  top: 100,
  width: 150,
  height: 130,
  fill: '#f59e0b',
});

// Add a star
engine.addShape('star', {
  left: 100,
  top: 300,
  points: 5,
  innerRadius: 30,
  outerRadius: 60,
  fill: '#10b981',
});

// Add a polygon (hexagon)
engine.addShape('polygon', {
  left: 300,
  top: 300,
  sides: 6,
  radius: 60,
  fill: '#6366f1',
});

💡

Default values

If you omit position properties, shapes are placed at the center of the visible canvas area. Fill defaults to #cccccc and stroke defaults to none.

Lines & Arrows

Lines and arrows use a two-point coordinate system instead of left/top/width/height.

// Add a simple line
engine.addShape('line', {
  x1: 50,
  y1: 50,
  x2: 300,
  y2: 200,
  stroke: '#000000',
  strokeWidth: 3,
});

// Add an arrow
engine.addShape('arrow', {
  x1: 50,
  y1: 100,
  x2: 300,
  y2: 100,
  stroke: '#ef4444',
  strokeWidth: 2,
});

Adding Text

Use engine.addText(content, options) to add text objects. See the Text & Typography page for full details.

// Add text to the canvas
engine.addText('Hello World', {
  left: 100,
  top: 200,
  fontSize: 48,
  fontFamily: 'Inter',
  fill: '#1a1a1a',
  fontWeight: 'bold',
});

Adding Images

Use await engine.addImage(url, options) to load and place an image. This method is async because the image needs to be fetched before it can be rendered.

// Add an image from URL
await engine.addImage('https://example.com/photo.jpg', {
  left: 100,
  top: 100,
});

// Add with specific dimensions
await engine.addImage('/uploads/logo.png', {
  left: 50,
  top: 50,
  scaleX: 0.5,
  scaleY: 0.5,
});

⚠️

CORS

Images loaded from external domains must have proper CORS headers. Otherwise the canvas will become tainted and exports will fail.

Object Properties

Every object on the canvas exposes a common set of properties that can be read and updated.

// Get an object by ID
const obj = engine.getObject(id);

// Update properties
engine.updateObject(id, {
  left: 200,
  top: 150,
  width: 300,
  height: 200,
  angle: 45,         // rotation in degrees
  opacity: 0.8,
  fill: '#ff0000',
  stroke: '#000000',
  strokeWidth: 2,
  rx: 10,            // corner radius X
  ry: 10,            // corner radius Y
});

Common Object Properties

Name	Type	Default	Description
`left`	`number`	—	X position from canvas left edge
`top`	`number`	—	Y position from canvas top edge
`width`	`number`	—	Object width in pixels
`height`	`number`	—	Object height in pixels
`angle`	`number`	`0`	Rotation angle in degrees (0-360)
`opacity`	`number`	`1`	Opacity from 0 (transparent) to 1 (opaque)
`fill`	`string`	—	Fill color (hex, rgb, or named color)
`stroke`	`string`	—	Stroke/border color
`strokeWidth`	`number`	`0`	Stroke width in pixels
`rx`	`number`	`0`	Corner radius X (rectangles only)
`ry`	`number`	`0`	Corner radius Y (rectangles only)

Selection

The selection API lets you programmatically select and deselect objects on the canvas.

// Select a single object
engine.selectObject(id);

// Get currently selected objects
const selected = engine.getSelectedObjects();
// Returns: Array<fabric.Object>

// Deselect everything
engine.deselectAll();

Removing Objects

// Remove a single object
engine.removeObject(id);

// Remove all selected objects
const selected = engine.getSelectedObjects();
selected.forEach(obj => engine.removeObject(obj.id));

Z-Order (Layering)

Control the stacking order of objects. These methods correspond to the layer controls in the Layers panel.

// Bring one level forward
engine.bringForward(id);

// Send one level backward
engine.sendBackward(id);

// Bring to the very front
engine.bringToFront(id);

// Send to the very back
engine.sendToBack(id);

Z-Order Methods

Name	Type	Default	Description
`bringForward(id)`	`void`	—	Move the object one level up in the stack
`sendBackward(id)`	`void`	—	Move the object one level down in the stack
`bringToFront(id)`	`void`	—	Move the object to the top of the stack
`sendToBack(id)`	`void`	—	Move the object to the bottom of the stack