Shape tool

The shape tool (S) creates vector shape layers. Each shape is a fully editable layer — change its type, fill, stroke, gradient, or geometry at any time.

#Shape types

• Rectangle — corner-radius supported
• Ellipse / Circle
• Triangle
• Polygon — n-sided, n configurable
• Star — points + inner-radius ratio configurable
• Line
• Arrow — line with an arrowhead; head size adjustable

The active shape type is picked from the shape panel on the right. Changing the type while a shape is selected morphs that layer in place — handy for "no actually I want a star not a polygon."

#Drawing

#Fill

Shapes can have one of two fill types:

#Solid

A single color (RGBA). Picker supports hex, RGB, HSL, eyedropper.

#Gradient

Multi-stop linear gradient. The shape panel exposes:

• Stops — add / remove / drag along the bar; each stop has a color and position 0–1
• Angle — 0–360°
• Color at each stop

Gradients are stored as an array of stops on the layer, so they round-trip cleanly through .img and through any programmatic edit.

Radial / conic gradients are (planned).

#Stroke

Independent of fill. Toggle on / off; configure:

• Color (RGBA)
• Width (px)
• Dash — solid, dashed, dotted (line-dash patterns)

Stroke aligns to the shape's outline — no inside / center / outside option (planned).

#Right-click menu

• Duplicate
• Bring forward / send backward / to front / to back
• Flip horizontal / vertical
• Free Transform
• Convert to clipping mask
• Delete

#Layer data shape

Each shape layer carries (simplified):

interface ShapeLayerData {
  id: string
  type: 'shape'
  shapeType: 'rect' | 'ellipse' | 'triangle' | 'polygon' | 'star' | 'line' | 'arrow'
  x: number; y: number
  width: number; height: number
  rotation: number       // degrees
  cornerRadius?: number  // rect only
  sides?: number         // polygon
  points?: number        // star
  innerRadiusRatio?: number // star
  fill: { type: 'solid'; color: string } | { type: 'gradient'; stops: Array<{ pos: number; color: string }>; angle: number }
  stroke?: { color: string; width: number; dash?: number[] }
  opacity: number
  blendMode: BlendMode
  effects?: LayerEffects
  // ...
}

This is the structure to emit if you're driving the editor programmatically — see For AI agents.