Node / Canvas · guide
Border clip, zoom, rotation & canvas blur
Current Apexify.js 6.0.0 documentation for Border clip, zoom, rotation & canvas blur.
Everything here is configured on CanvasConfig and passed to await painter.createCanvas({ … }). You never touch the raw canvas drawing API — Apexify scales and clips for you, then draws shadow / stroke after the background stack.
This page covers layout-level fields only. canvas.shadow and canvas.stroke have their own references (full option lists):
| Topic | Details |
|---|---|
| Drop shadow behind the card | Shadow — every option (ShadowOptions) |
| Outline around the clipped shape | Stroke — every option (StrokeOptions) |
Rounded rectangle clip — borderRadius, borderPosition
Backgrounds (solid, gradient, custom image, bgLayers, patternBg, noiseBg) are painted inside a clip path.
| Field | Meaning |
|---|---|
borderRadius | Corner rounding in px, or "circular" for a full-bounds ellipse: square canvases become circles; rectangular canvases become ovals using the full width and height. |
borderPosition | Which corners participate ("all", "top-left", "top" + "left" combos, "bottom-right", …). Matches borderPosition in apexify.js types. |
Independence from shadow/stroke: The clip uses canvas.borderRadius / canvas.borderPosition. A rounded card shadow needs shadow.borderRadius (and matching roundedCorners) set explicitly — Apexify does not copy canvas corners onto shadow / stroke automatically.
Zoom — zoom
Applied inside the clip before backgrounds are painted — useful for a subtle “zoom into” hero crop without resizing width / height.
| Field | Role |
|---|---|
scale | Uniform scale (1 = no-op). Values > 1 zoom in (content grows); < 1 zoom out. |
centerX, centerY | Pivot in canvas coordinates (defaults: centre of the canvas). |
Rotation — rotation
Degrees around the centre of your x, y, width, height rectangle (same box used for clipping). 0 means no rotation.
Canvas opacity — opacity
0…1 — transparency for the main background painting phase (primary fill + bgLayers + patternBg + noiseBg). 1 is fully opaque.
Blend mode — blendMode
A GlobalCompositeOperation string ("multiply", "screen", "overlay", …) applied during that same background phase (after translate into x, y).
Canvas blur — blur
Pixels, not vectors: a numeric Gaussian blur radius applied only while painting the primary background (colorBg, gradientBg, customBg fill paths inside createCanvas). It does not automatically blur bgLayers entries or patternBg / noiseBg.
This is different from:
stroke.blur— soft glow around the outline (stroke doc).shadow.blur— softness of the drop shadow (shadow doc).
Drop shadow & outline — quick reminder
After backgrounds finish, CanvasCreator draws shadow then stroke on paths aligned with x, y, width, height, using each option bag’s own borderRadius / corner masks.
→ Shadow — every option · Stroke — every option · Paint order