Shape Clip

The ShapeClip draws vector shapes directly on the canvas. Prefer it over image assets for anything geometric, rectangles, circles, triangles, stars, and polygons. Shapes render crisply at any resolution.

Create a Shape Clip

const shape = await layer.addClip({
  type: "shape",
  shape: "rectangle",
  startTime: 0,
  duration: 5,
  style: {
    fillColor: "#6d6ff2",
    strokeColor: "#FFFFFF",
    strokeWidth: 4,
    width: 600,
    height: 300,
  },
});

shape.style.setPosition(960, 540);
shape.style.setCornerRadius([40, 40, 40, 40]);

Idle

Supported Shapes

List of Supported Shapes

Shape	Support
Rectangle	✅
Rounded Rectangle	✅
Circle	✅
Ellipse	✅
Triangle	✅
Star	✅
Polygon	✅
Bezier	✅

Shape-Specific Style

Each shape accepts a shared set of style fields plus a few shape-specific ones.

• Star: nrPoints, innerRadius, outerRadius.
• Rounded Rectangle: rectRadius.
• Polygon and Bezier: pass a list of points. Use null to separate multiple shapes drawn in the same clip.

Colors, stroke, stroke alignment, and corner radius live on ShapeStyle.

See Also

• Styling
• Masking: use a Shape clip as an alpha mask for another clip.
• Clip API Reference
• API reference: ShapeClip, ShapeStyle