Skip to main content

sdk.shapeapi.createshape

Home > @kittl/sdk > ShapeAPI > createShape

ShapeAPI.createShape() method​

Creates a new basic shape object in the design canvas.

This method creates a geometric shape with the specified type, position, and visual properties. The shape is automatically added to the design state and can be positioned either absolutely or relative to other elements. Size calculations are handled automatically based on the shape's default dimensions and any scaling requirements.

**Shape Types and Default Sizes:** - Rectangle: 433.8 × 433.8 pixels - Circle (ellipse): 446.36 × 446.36 pixels - Star: 100 × 95.11 pixels - Triangle (polygon): 100 × 86.60 pixels

**Position Options:** - Absolute: Exact pixel coordinates from canvas origin - Relative: Positioned relative to existing artboards with automatic spacing

**Visual Properties:** - Fill color with support for gradients and patterns - Border styling (stroke width, color, dash patterns) - Transformation properties (rotation, skew, opacity) - Shadow effects

Signature:

createShape(input: CreateShapeInput, opts?: DesignApiOptions): NormalizedBasicShapeObject;

Parameters​

Parameter

Type

Description

input

CreateShapeInput

Shape creation configuration

opts

DesignApiOptions

(Optional) Optional execution configuration controlling patch behavior and change tracking

Returns:

NormalizedBasicShapeObject

The newly created BasicShapeSerializedObject with all computed properties

Exceptions​

When position calculation fails or artboard constraints are violated

When invalid shape type is provided

When size constraints are not met

Example​

// Create a simple blue rectangle
const rect = api.createShape({
  shapeType: 'rectangle',
  position: { absolute: { left: 0, top: 0 } },
  fillColor: '#0066cc'
});

// Create a star with custom size and border
const star = api.createShape({
  shapeType: 'star',
  position: { relative: { to: 'viewport', location: 'center' } },
  size: { width: 150, height: 142, applyViewportScale: true },
  fillColor: '#ffcc00',
  border: { strokeWidth: 3, stroke: '#ff6600' },
  opacity: 0.9
});

// Create using batch operations for performance
const batchClient = designController.createBatchClient();
const circle = api.createShape({
  shapeType: 'ellipse',
  position: { absolute: { left: 200, top: 100 } }
}, { batchClient });
batchClient.commit();