Skip to content
Apexify.jsDocs
Apexify.js version v5.4.5

Node / Images Shapes · guide

Layer styling — rotation, opacity, blur, clip, box fill

Current Apexify.js 6.0.0 documentation for Layer styling — rotation, opacity, blur, clip, box fill.

apexify.jsRuntime: nodeCURRENTSince 6.0.0

These fields apply to both bitmaps and shapes unless noted.

Transform & atmosphere

FieldTypeWhat it does
rotationnumber (degrees)Rotates around the centre of the layout box (x + width/2, y + height/2).
opacitynumber (0…1)globalAlpha while drawing bitmap pixels / vector fill.
blurnumber (px)Canvas filter: blur(...) during the raster/shape paint phase.
blendModeGlobalCompositeOperationPorter–Duff compositing vs pixels already on the canvas (multiply, screen, …).
SOURCEtypescript
typescript
Studio
await painter.createImage(  {    source: './logo.png',    x: 120,    y: 80,    width: 200,    height: 200,    fit: 'contain',    rotation: -8,    opacity: 0.92,    blur: 0.5,    blendMode: 'multiply',  },  buffer);

Rounded rectangle clip — borderRadius

Controls how drawImageBitmap (and drawShape) builds the clip path unless you supply clipPath.

ValueBehaviour
0 / omittedSharp rectangle matching width × height.
number > 0Corner radius in pixels. Internally clamped so arcs never overlap: radius ≤ min(width, height) / 2.
'circular'Ignores numeric radius and clips to the circle inscribed in the box (diameter = min(width, height)). borderPosition is ignored in this mode — every corner is rounded equally into one circle.

The shadow (shadow) for bitmaps is painted before this clip, so you still see a soft halo outside rounded thumbs — desirable for UI cards.

SOURCEtypescript
typescript
Studio
// Numeric radius — only chosen corners round (see borderPosition below)await painter.createImage(  {    source: './photo.jpg',    x: 40,    y: 40,    width: 220,    height: 140,    fit: 'cover',    borderRadius: 28,    borderPosition: 'top-left, bottom-right',  },  buffer); // Perfect avatar bubbleawait painter.createImage(  {    source: './avatar.jpg',    x: 40,    y: 40,    width: 160,    height: 160,    fit: 'cover',    borderRadius: 'circular',  },  buffer);

Corner selection — borderPosition

Strings are case-insensitive and may list multiple corners separated by commas.

Tokens understood by computeCornerRadii:

TokenMeaning
allEvery corner uses the computed radius (default).
top, right, bottom, leftEnables both corners touching that edge (e.g. top ⇒ top-left + top-right).
top-left, top-right, bottom-right, bottom-leftSingle corner only.

Examples:

  • borderPosition: 'bottom' — floor-card look (only bottom corners rounded).
  • borderPosition: 'top-left, bottom-right' — diagonal styling with borderRadius: 24.
  • Omit borderPosition → behaves like all.

Shapes reuse the same helper for borderRadius clipping around their layout box before drawShape runs — the vector geometry itself stays sharp unless you approximate with filters.

Polygon clip — clipPath

clipPath is { x, y }[] with ≥ 3 vertices in canvas space. When present it replaces the rounded-rect clip entirely (Bitmap pipeline only — shape layers ignore clipPath today).

SOURCEtypescript
typescript
Studio
await painter.createImage(  {    source: './texture.png',    x: 0,    y: 0,    width: 400,    height: 400,    fit: 'cover',    clipPath: [      { x: 200, y: 40 },      { x: 380, y: 340 },      { x: 20, y: 340 },    ],  },  buffer);

Fewer than three points throws Clip path must have at least 3 points.

Behind the pixels — boxBackground

boxBackground?: { color?: string; gradient?: gradient }

Rendered after shadow, before clipping. Visible wherever the bitmap does not fully cover the layout box (letterboxing under contain) or when opacity exposes the plate.

Pipeline cheat sheet (bitmaps)

  1. Rotation → shadow plate → boxBackground
  2. Clip (clipPath or borderRadius path)
  3. Draw masked/distorted bitmap (see other chapters)

Shapes skip clipPath but otherwise mirror borderRadius clipping around width × height.

Next steps

Images & shapes (createImage) — overviewGuide · node · CURRENT

Current Apexify.js 6.0.0 documentation for Images & shapes (createImage) — overview.

createImage basics — source, placement & fitGuide · node · CURRENT

Current Apexify.js 6.0.0 documentation for createImage basics — source, placement & fit.

Shapes — every ShapeType & ShapePropertiesGuide · node · CURRENT

Current Apexify.js 6.0.0 documentation for Shapes — every ShapeType & ShapeProperties.

Drop shadow & stroke (ShadowOptions, StrokeOptions)Guide · node · CURRENT

Current Apexify.js 6.0.0 documentation for Drop shadow & stroke (ShadowOptions, StrokeOptions).