Patterns & film noise

Use await painter.createCanvas(config) with fields on CanvasConfig (apexify.js). Patterns and noise are not separate ApexPainter methods — they are pure config: either top-level patternBg / noiseBg, or entries inside bgLayers[].

#Paint order (what goes on top)

Inside CanvasCreator, after clipping and optional zoom, backgrounds are painted in this fixed order:

1. Exactly one primary fill — videoBg, or customBg, or gradientBg, or colorBg, or transparentBase: true (no automatic fill), or default opaque #000 if you set none of those.
2. bgLayers[] — each layer in array order (bottom → top). Supports color, gradient, image, pattern (tiled bitmap), presetPattern (procedural PatternOptions), and noise.
3. patternBg — full-canvas procedural pattern (PatternOptions). Runs after every bgLayers row.
4. noiseBg — film grain overlay (applyNoise). Runs last among background paints (still before canvas shadow / stroke).

So: patternBg is never “between” two bgLayers — if you need a pattern sandwiched between colors, model it as bgLayers (presetPattern / pattern) or reorder bgLayers + skip patternBg.

See also Paint order for the full pipeline.

#Three pattern mechanisms (do not mix them up)

Summary

• Want a dots / grid / stripes overlay drawn after all bgLayers? → patternBg.
• Want that between an image wash and a vignette? → bgLayers with presetPattern (and optional blendMode per layer).
• Want your own seamless PNG/JPG tiled? → bgLayers type: "pattern" with source + repeat.

#patternBg — procedural overlay after bgLayers

Type: PatternOptions (see catalog below). Typical use: subtle texture on top of colorBg or stacked bgLayers.

1import { ApexPainter } from "apexify.js";2 3const painter = new ApexPainter({ type: "buffer" });4 5const { buffer } = await painter.createCanvas({6  width: 640,7  height: 360,8  colorBg: "#0f172a",9  bgLayers: [10    { type: "gradient", value: { type: "linear", rotate: 135, colors: [{ stop: 0, color: "#1e293b" }, { stop: 1, color: "#020617" }] } },11  ],12  patternBg: {13    type: "dots",14    color: "#ffffff",15    size: 14,16    spacing: 22,17    opacity: 0.12,18    blendMode: "soft-light",19  },20});

If you omit blendMode on patternBg, the renderer defaults to overlay so light textures sit on photographs or gradients without repainting the whole canvas math yourself.

#bgLayers — presetPattern vs pattern

##presetPattern (vector-style presets)

Same PatternOptions as patternBg, but honours stack order and per-layer opacity / blendMode.

1await painter.createCanvas({2  width: 400,3  height: 240,4  colorBg: "#020617",5  bgLayers: [6    {7      type: "presetPattern",8      opacity: 0.35,9      blendMode: "multiply",10      pattern: {11        type: "stripes",12        color: "#38bdf8",13        secondaryColor: "#0ea5e9",14        size: 12,15        spacing: 8,16        rotation: 12,17      },18    },19    { type: "color", value: "rgba(2, 6, 23, 0.35)", blendMode: "source-over" },20  ],21});

##pattern (tiled bitmap)

Loads source as an image (path / URL resolved like other backgrounds), builds a CanvasPattern, fills the canvas.

1await painter.createCanvas({2  width: 500,3  height: 280,4  colorBg: "#f8fafc",5  bgLayers: [6    {7      type: "pattern",8      source: "./assets/seamless-noise.png",9      repeat: "repeat",10      opacity: 0.4,11    },12  ],13});

#PatternOptions — type catalogue

Common fields across types (defaults vary per type): color, secondaryColor, opacity, size, spacing, rotation, offsetX, offsetY, blendMode, gradient. custom additionally uses customPatternImage, repeat, scale.

Import typings from apexify.js / apexify.js/types — PatternOptions ships with the package.

#Noise — noiseBg vs bgLayers noise

Both call the same applyNoise helper: random grayscale pixels drawn into a scratch bitmap, then drawImage onto the canvas; intensity scales alpha (255 * intensity per pixel).

Top-level noiseBg runs after patternBg. A noise inside bgLayers runs where that layer sits in the stack — use it for grain between washes without affecting layers above.

1await painter.createCanvas({2  width: 480,3  height: 270,4  colorBg: "#111827",5  patternBg: { type: "grid", color: "#94a3b8", opacity: 0.08, size: 24, spacing: 16 },6  noiseBg: { intensity: 0.06 },7});

#Transparent canvases

With transparentBase: true, there is no automatic colorBg fill — compose visibility only via bgLayers, patternBg, and noiseBg. See Transparent base.

#Types reference

• PatternOptions — procedural / custom tiled presets.
• BackgroundLayer — union for bgLayers (color, gradient, image, pattern, presetPattern, noise).
• CanvasConfig — patternBg, noiseBg, bgLayers.