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

Create a deterministic canvas

Executable example · minimal

Create a deterministic canvas

Render a fixed 320×180 server-side PNG using the public ApexPainter canvas API.

✓ VerifiedRuntime: nodeapexify.js

Prerequisites

  • Node.js 22, 24, or 26
  • apexify.js 6.0.0

Authoritative source

SOURCEtypescript
typescript
Studio
import { mkdir, writeFile } from 'node:fs/promises';import { join } from 'node:path';import { ApexPainter } from 'apexify.js'; const outputDir = process.env.APEXIFY_EXAMPLE_OUTPUT_DIR;if (!outputDir) throw new Error('APEXIFY_EXAMPLE_OUTPUT_DIR is required.'); const painter = new ApexPainter({ type: 'buffer' });const canvas = await painter.createCanvas({ width: 320, height: 180, colorBg: '#0f172a' });if (!Buffer.isBuffer(canvas.buffer)) throw new Error('Expected createCanvas() to expose a PNG Buffer.'); await mkdir(outputDir, { recursive: true });await writeFile(join(outputDir, 'canvas-basic.png'), canvas.buffer);console.log(JSON.stringify({ example: 'node.canvas.basic', format: 'png', width: 320, height: 180, bytes: canvas.buffer.length }));

Source hash: d1603f74395a1b3c07efbf96be39ca6d867413977a29ea556c0bfc1e712649e4. The displayed payload is generated from the files executed by DOC-5 verification.

Verified output · canvas-basic.png
Create a deterministic canvas verified output
320 × 180 · metadata verification

Goal

Create the smallest useful server-rendered image with explicit dimensions and background color.

Important options

  • width
  • height
  • colorBg

Why these choices

  • Explicit dimensions make output verification deterministic.
  • A local color background avoids remote assets and font dependencies.

Variants

  • Replace colorBg with a gradient or layered background after the basic pipeline is understood.

Performance note

The example uses one small canvas and performs no remote I/O.

Error note

Invalid dimensions are rejected by Apexify.js runtime validation before rendering.

Related documentation

Related API

Next steps

Use node.chart.bar for a generated chart or node.integration.report for a multi-file workflow.

Next steps