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

Node / Canvas · reference

Canvas shadow — every ShadowOptions field

Current Apexify.js 6.0.0 documentation for Canvas shadow — every ShadowOptions field.

apexify.jsRuntime: nodeCURRENTSince 6.0.0

Set shadow on CanvasConfig when calling await painter.createCanvas({ … }). Apexify paints a filled silhouette behind your clipped rectangle — offset, softened, and optionally gradient-filled — mimicking a card drop shadow.

Type ShadowOptions is exported from apexify.js / apexify.js/types (common.ts).

Minimal example

SOURCEtypescript
typescript
Studio
import { ApexPainter } from "apexify.js"; const painter = new ApexPainter({ type: "buffer" }); await painter.createCanvas({  width: 340,  height: 180,  colorBg: "#ffffff",  borderRadius: 20,  borderPosition: "all",  shadow: {    color: "rgba(15,23,42,0.35)",    offsetX: 4,    offsetY: 12,    blur: 28,    opacity: 0.55,    borderRadius: 20,    roundedCorners: "all",  },});

Field reference (ShadowOptions)

FieldTypeDefault (if omitted)What it does
colorstring"rgba(0,0,0,1)"Solid fill for the shadow shape before opacity multiplies it. Ignored when gradient is set.
gradientgradient—Linear / radial / conic gradient fill for the shadow (same gradient discriminated union as backgrounds). Overrides color.
offsetX, offsetYnumber0Shifts the shadow rectangle from the canvas x/y box (positive offsetY → shadow sits lower).
blurnumber20Gaussian blur (CSS px) applied only to the shadow pass (blur(…)) — 0 = hard-edged silhouette.
opacitynumber0.4Multiplies globalAlpha for the shadow fill (0…1 typical).
borderRadiusnumber | "circular"0Corner rounding of the shadow shape itself — match canvas.borderRadius for consistent rounded cards.
roundedCornersborderPosition"all"Which corners of the shadow path use borderRadius (same vocabulary as canvas.borderPosition — "top-left", "top", comma-separated combos, …).
borderPositionborderPosition—Deprecated alias for roundedCorners — prefer roundedCorners for new code.

Behaviour notes

  1. Paint order: Background stack finishes first; shadow is drawn after backgrounds but before stroke (paint order).
  2. Clip vs shadow: The visible card uses canvas.borderRadius. The shadow uses shadow.borderRadius / shadow.roundedCorners — set both when you want the blur to hug rounded corners.
  3. Gradient shadows: Useful for coloured ambient light (linear / radial / conic — same shapes as gradientBg).
  4. Blur: Large blur values are visually heavier; tune together with opacity.

Next steps

Canvas and createCanvasGuide · node · CURRENT

Understand createCanvas, CanvasConfig, CanvasResults, validation, backgrounds, rendering order, and the core Node canvas workflow.

Canvas size and coordinatesGuide · node · CURRENT

Reference the width, height, x, and y sizing and coordinate behavior used by Apexify.js createCanvas.

Primary backgrounds (pick exactly one)Guide · node · CURRENT

Current Apexify.js 6.0.0 documentation for Primary backgrounds (pick exactly one).

Transparent base (transparentBase)Guide · node · CURRENT

Current Apexify.js 6.0.0 documentation for Transparent base (transparentBase).