Advanced / Scene · guide

Scene layers — image, text, path, imageBuffer

Current Apexify.js 6.0.0 documentation for Scene layers — image, text, path, imageBuffer.

apexify.jsRuntime: nodeCURRENTSince 6.0.0

These layers use ImageCreator, TextCreator, and Path2DCreator under the hood — same concepts as createImage, createText, and path2d.draw on a buffer.

image

images: ImageProperties | ImageProperties[] — same as createImage.
options: optional CreateImageOptions (grouped mode, clip, filters, etc. — see Create image basics).

Variant: single full-bleed image

1{2  type: "image",3  images: {4    source: "./photo.jpg",5    x: 0,6    y: 0,7    width: 1280,8    height: 720,9  },10}

Variant: multiple image entries (stacked in one layer)

1{2  type: "image",3  images: [4    { source: "./sky.png", x: 0, y: 0, width: 800, height: 400 },5    { source: "./logo.png", x: 620, y: 24, width: 140, height: 140, opacity: 0.95 },6  ],7}

Order inside images[] is paint order within that layer (before the next SceneLayer).

Variant: URL or cwd-relative path

1{2  type: "image",3  images: {4    source: "https://example.com/asset.png",5    x: 100,6    y: 100,7    width: 200,8    height: 200,9  },10}

Resolution rules match ImageCreator (see image guides).

text

texts: TextProperties | TextProperties[] — rendered with TextCreator.renderTextsOntoContext.

Variant: single headline

1{2  type: "text",3  texts: [4    {5      content: "Dashboard",6      x: 48,7      y: 72,8      fontSize: 56,9      color: "#0f172a",10      fontPath: "./fonts/Bold.ttf",11    },12  ],13}

Variant: stacked lines (subtitle + title)

1{2  type: "text",3  texts: [4    { content: "Q4 Report", x: 48, y: 48, fontSize: 20, color: "#64748b" },5    { content: "Revenue", x: 48, y: 88, fontSize: 44, color: "#0f172a" },6  ],7}

Variant: two separate text layers (control z-order)

Putting subtitles in a separate SceneLayer lets you insert an image layer between title and subtitle if needed.

1const layers = [2  { type: "text" as const, texts: [{ content: "Back", x: 10, y: 10, fontSize: 14, color: "#888" }] },3  { type: "image" as const, images: { source: "./divider.png", x: 0, y: 40, width: 400, height: 4 } },4  { type: "text" as const, texts: [{ content: "Front", x: 10, y: 52, fontSize: 24, color: "#000" }] },5];

path

path: PathCommand[] (or a path handle typed as unknown).
options: optional Path2DDrawOptions — stroke, fill, transform.

Variant: stroke only

1{2  type: "path",3  path: [4    { type: "moveTo", x: 40, y: 200 },5    { type: "lineTo", x: 360, y: 200 },6    { type: "lineTo", x: 200, y: 40 },7    { type: "closePath" },8  ],9  options: {10    stroke: { color: "#2563eb", width: 3, lineJoin: "round" },11  },12}

Variant: fill + rounded rect command

1{2  type: "path",3  path: [4    {5      type: "roundedRect",6      x: 50,7      y: 50,8      width: 200,9      height: 100,10      borderRadius: 16,11    },12  ],13  options: {14    fill: { color: "#dbeafe", rule: "nonzero" },15    stroke: { color: "#1d4ed8", width: 2 },16  },17}

Variant: raw commands array passed from a helper

1function badgePath(cx: number, cy: number, r: number) {2  return [3    { type: "moveTo" as const, x: cx + r, y: cy },4    { type: "arc" as const, x: cx, y: cy, radius: r, startAngle: 0, endAngle: Math.PI * 2 },5  ];6}7 8{9  type: "path",10  path: badgePath(100, 100, 40),11  options: { fill: { color: "#ef4444" } },12}

imageBuffer

Draws an already-decoded PNG/JPEG Buffer at x,y. Useful for badges, QR codes, or thumbnails produced elsewhere.

Field	Role
`buffer`	Raster bytes
`x`, `y`	Top-left
`width`, `height`	Optional draw size (defaults to image intrinsic size)
`globalAlpha`, `globalCompositeOperation`	Optional compositing

Variant: logo buffer on top of gradient (another layer)

1import fs from "fs";2 3const logo = await fs.promises.readFile("./logo.png");4 5const layer = {6  type: "imageBuffer" as const,7  buffer: logo,8  x: 700,9  y: 30,10  width: 120,11  height: 120,12  globalAlpha: 1,13};

Variant: soft watermark (multiply)

1{2  type: "imageBuffer",3  buffer: watermarkBuf,4  x: 0,5  y: 0,6  width: 800,7  height: 450,8  globalAlpha: 0.35,9  globalCompositeOperation: "multiply",10}

Variant: natural size (omit width/height)

1{2  type: "imageBuffer",3  buffer: iconBuf,4  x: 16,5  y: 16,6}

#image

##Variant: single full-bleed image

##Variant: multiple image entries (stacked in one layer)

##Variant: URL or cwd-relative path

#text

##Variant: single headline

##Variant: stacked lines (subtitle + title)

##Variant: two separate text layers (control z-order)

#path

##Variant: stroke only

##Variant: fill + rounded rect command

##Variant: raw commands array passed from a helper

#imageBuffer

##Variant: logo buffer on top of gradient (another layer)

##Variant: soft watermark (multiply)

##Variant: natural size (omit width/height)

Related guides and reference

Next steps