Node / Canvas · reference
Canvas stroke — every StrokeOptions field
Current Apexify.js 6.0.0 documentation for Canvas stroke — every StrokeOptions field.
Set stroke on CanvasConfig with await painter.createCanvas({ … }). Apexify strokes the same logical rectangle as your clipped canvas (x, y, width, height) — optionally inset/outset, dashed, blurred, gradient-coloured, or limited to specific edges.
Naming caveat: stroke.borderPosition chooses which edges get ink (top, left, comma-separated lists, …). canvas.borderPosition controls which corners use canvas.borderRadius on the clip — different meaning. Outline corner rounding uses stroke.roundedCorners + stroke.borderRadius.
Type StrokeOptions ships from apexify.js / apexify.js/types.
Minimal example
Field reference (StrokeOptions)
| Field | Type | Default | What it does |
|---|---|---|---|
color | string | "#000" | Stroke colour when gradient is absent. |
gradient | gradient | — | Linear / radial / conic stroke paint (overrides color). |
width | number | 2 | lineWidth in CSS pixels. |
position | number | 0 | Expands or contracts the stroked rectangle before width is applied: the engine builds a rect position pixels outward on each side (negative pulls the outline inward). |
blur | number | 0 | Gaussian blur on the stroke pass — soft halo around the outline (independent from canvas.blur on fills). |
opacity | number | 1 | Alpha multiplier for the entire stroke pass. |
borderRadius | number | "circular" | 0 | Corner rounding for the stroked path (**match canvas.borderRadius for aligned rims). |
roundedCorners | borderPosition | "all" | Which corners receive borderRadius (same vocabulary as canvas borderPosition). |
borderPosition | borderPosition | "all" | Edge mask: which sides actually draw ("top", "bottom", "left", "right", or comma-separated lists like "top, bottom"). Corner keywords ("top-left", …) expand to two adjacent edges. "all" = full rectangle. |
style | union below | "solid" | Dash / faux-CSS border personality (see next section). |
Line styles (style)
style | Appearance |
|---|---|
solid | Continuous line (lineDash cleared). |
dashed | Long dashes (width * 3 gap width * 2). |
dotted | Round caps with width-spaced dots. |
groove | Double-pass: darker stroke then lighter stroke (simulates inset). Gradients reuse both passes. |
ridge | Double-pass: light then dark (simulates raised edge). |
double | Two parallel strokes each width / 2 thick. |
Groove / ridge / double ignore simple lineDash — they paint two strokes with computed colours derived from color when no gradient is set.
Partial borders (borderPosition on stroke)
Unlike roundedCorners (corner rounding mask), stroke.borderPosition selects which edges receive ink:
Corner tokens (top-left, …) map to two sides internally. Use "all" for a full frame.
Combining with canvas corners
canvas.borderRadiusclips fills.stroke.borderRadius+stroke.roundedCornersshape the outline.
For a rounded rectangle outline that tracks the card, keep stroke.borderRadius aligned with canvas.borderRadius unless you intentionally want a mismatched rim.