Shapes — every ShapeType & ShapeProperties

Vector shapes are drawn through the same createImage pipeline as bitmaps: set source to a ShapeType string and put geometry/styling under shape?: ShapeProperties.

#Quick usage

1await painter.createImage(2  {3    source: 'star',4    x: 40,5    y: 40,6    width: 180,7    height: 180,8    shape: {9      fill: true,10      color: '#f59e0b',11      outerRadius: 70,12      innerRadius: 28,13    },14    stroke: { color: '#1f2937', width: 3 },15    shadow: { color: '#00000066', offsetX: 4, offsetY: 6, blur: 12 },16  },17  buffer18);

Required layer fields x and y always anchor the layout rectangle. Most primitives derive geometry from width / height (defaults 100 each when omitted).

#Shape catalogue (ShapeType)

#ShapeProperties reference

#Important behaviour notes

1. star is always 5 points; shape.points is not used for stars.
2. Custom polygon.points are absolute canvas coordinates — they are not interpreted as offsets from x, y. Omit points to get a regular polygon centred in the layout box.
3. arc vs pieSlice share the same implementation: with innerRadius > 0 you get an annulus sector; with innerRadius omitted or 0, the path includes the centre (pie wedge).
4. Shape layers support filters, shadow, stroke, boxBackground, borderRadius, and borderPosition from the parent ImageProperties, but they do not use the bitmap-only features mask, distortion, meshWarp, clipPath, effects, filterOrder, or filterIntensity (see Paint order).
5. Shadows: heart and star use a shape-aware shadow path; other shapes use the rectangular shadow for the layout box.

#More examples

Regular hexagon

1{2  source: 'polygon',3  x: 50,4  y: 50,5  width: 200,6  height: 200,7  shape: { color: '#6366f1', sides: 6 },8}

Custom polygon (absolute vertices)

1{2  source: 'polygon',3  x: 0,4  y: 0,5  width: 400,6  height: 400,7  shape: {8    color: '#10b981',9    points: [10      { x: 200, y: 60 },11      { x: 320, y: 320 },12      { x: 80, y: 320 },13    ],14  },15}

Donut arc segment

1{2  source: 'arc',3  x: 0,4  y: 0,5  width: 300,6  height: 300,7  shape: {8    color: '#f472b6',9    startAngle: 0,10    endAngle: Math.PI,11    outerRadius: 120,12    innerRadius: 70,13    centerX: 150,14    centerY: 150,15  },16}