Node / Images Shapes · guide
Professional image filters (ImageFilter[])
Current Apexify.js 6.0.0 documentation for Professional image filters (ImageFilter[]).
The filters field is a stack of ImageFilter objects. Filters use the shared Sharp/Canvas RGBA pipeline, with channel-changing operations normalized back to RGBA before compositing. They operate on bitmap layers only (not on pure shape vector fills in the same way — shape layers apply filters on the clipped rectangular region before the shape is drawn).
Global tuning
| Field | Type | Default | Role |
|---|---|---|---|
filterOrder | 'pre' | 'post' | 'post' | Pre draws the fitted image to a temp surface, filters it, then pastes it (skips mask, distortion, mesh warp, post filters, effects, and stroke — see Paint order). Post filters the pixels already painted inside the clip. |
filterIntensity | number >= 0 | 1 | Multiplier applied to current typed intensity / value fields. Studio validates the resulting effective values against each filter’s runtime range. |
Filter catalogue (ImageFilter.type)
The runtime validates these ranges before rendering. Visual Studio uses the same contract for input minimums, maximums, steps, defaults, and semantic validation.
type | Runtime parameter(s) | Accepted range | Notes |
|---|---|---|---|
gaussianBlur | intensity | 0–100 | Blur radius/strength in pixels. |
motionBlur | intensity, angle | 0–101, −3600°–3600° | Directional blur. |
radialBlur | intensity, centerX, centerY | 0–50, 0–width, 0–height | Centre coordinates are pixels. |
sharpen | intensity | 0–10 | Sharpening strength. |
noise | intensity | 0–1 | Deterministic noise. |
grain | intensity | 0–1 | Deterministic monochrome grain. |
edgeDetection | intensity | 0–10 | Edge-emphasis strength. |
emboss | intensity | 0–10 | Emboss strength. |
invert | none | on/off | Presence of { type: 'invert' } means enabled. |
grayscale | none | on/off | Presence of { type: 'grayscale' } means enabled. |
sepia | none | on/off | Presence of { type: 'sepia' } means enabled. |
pixelate | size, optional x, y, width, height | size: integer 1–max(width,height); region must stay inside the filtered surface | Pixelates the whole image by default, or only the selected rectangular region when region fields are provided. |
brightness | value | −100–100 | Percentage-style brightness adjustment. |
contrast | value | −100–100 | Percentage-style contrast adjustment. |
saturation | value | −100–100 | Percentage-style saturation adjustment. |
hueShift | value | −3600°–3600° | Hue rotation; rendering wraps the angle modulo 360°. |
posterize | levels | integer 2–256 | Number of color levels. |
Parameterless filters are boolean by presence.
invert,grayscale, andsepiado not accept anintensity,value,radius, or other numeric field. Visual Studio exposes them as On/Off controls.
Pixelate a selected region
x / y are the top-left pixel of the region. width / height default to the remaining surface size. Studio dynamically tightens the width/height maximum when X or Y changes, so the region cannot extend beyond the image/canvas bounds.
The typed stack does not use radius for Gaussian/motion/radial blur, size for grain, or angle for emboss. Those stale/extra parameters are rejected by Studio semantic validation.
Combining filters
- Order matters: filters run first → last as listed.
- Filters run through the shared RGBA raster pipeline; channel-changing filters such as
grayscaleare normalized back to RGBA before compositing. - Prefer
filterOrder: 'post'when you needstroke,effects,mask, ordistortionin the same layer —preexits before those stages.
Shape layers
When source is a ShapeType, filters are applied inside drawShape on the width × height clip region before painting the vector shape. filterOrder and filterIntensity from ImageProperties are not applied on that path — pass concrete intensity / value on each ImageFilter.