Skip to main content

​
addShapeLayer()

Add a rasterized shape layer with fill and/or stroke styling.
​
options
ShapeLayerOptions
required
​
layerId
number
The created layer’s ID

​
Shape Types

​
Rectangle

const rectId = comp.addShapeLayer({
  name: 'box',
  type: 'rectangle',
  width: 100,
  height: 80,
  fill: [255, 0, 0, 255],
  stroke: { color: [0, 0, 0, 255], width: 2 }
});

​
Rounded Rectangle

const roundedId = comp.addShapeLayer({
  name: 'badge',
  type: 'roundedRect',
  x: 24,
  y: 24,
  width: 96,
  height: 40,
  radius: 12,
  fill: [255, 0, 0, 255],
  stroke: { color: [255, 255, 255, 255], width: 2 }
});

​
Ellipse

const circleId = comp.addShapeLayer({
  name: 'circle',
  type: 'ellipse',
  width: 64,
  height: 64,
  fill: [0, 255, 0, 255]
});

​
Line

const lineId = comp.addShapeLayer({
  name: 'line',
  type: 'line',
  width: 100,
  height: 1,
  stroke: { color: [0, 0, 255, 255], width: 3 }
});

​
Polygon

For polygons, the width and height are optional. If not provided, they’re derived from the points. 
const triangleId = comp.addShapeLayer({
  name: 'triangle',
  type: 'polygon',
  points: [
    { x: 50, y: 0 },
    { x: 100, y: 100 },
    { x: 0, y: 100 }
  ],
  fill: [255, 128, 0, 255],
  stroke: { color: [0, 0, 0, 255], width: 2 }
});

​
Fill and Stroke Styling

​
Fill

Fill color is specified as a 4-byte RGBA array: 
fill: [255, 0, 0, 255]  // Red, fully opaque
fill: [0, 128, 255, 128] // Blue, 50% transparent

​
Stroke

Stroke is an object with color (RGBA array) and width (number): 
stroke: {
  color: [0, 0, 0, 255],
  width: 2
}

​
Fill and Stroke Requirements

You must provide at least one of fill or stroke. You can provide both: 
const shapeId = comp.addShapeLayer({
  name: 'outlined box',
  type: 'rectangle',
  width: 100,
  height: 100,
  fill: [255, 255, 255, 255],
  stroke: { color: [0, 0, 0, 255], width: 3 }
});
Or just one: 
// Fill only
const filledId = comp.addShapeLayer({
  name: 'filled',
  type: 'ellipse',
  width: 50,
  height: 50,
  fill: [255, 0, 0, 255]
});

// Stroke only
const outlineId = comp.addShapeLayer({
  name: 'outline',
  type: 'rectangle',
  width: 100,
  height: 100,
  stroke: { color: [0, 0, 255, 255], width: 2 }
});

​
Transforms

Shape layers support the same non-destructive transforms as image layers: 
const shapeId = comp.addShapeLayer({
  name: 'rotated rect',
  type: 'rectangle',
  width: 80,
  height: 60,
  fill: [255, 0, 0, 255]
});

comp.updateLayer(shapeId, {
  anchor: 'center',
  rotation: 45,
  scaleX: 1.5,
  scaleY: 1.5
});

Build docs developers (and LLMs) love

Get started for freeTalk to us