← Previous Next →

Scrawl-canvas v8 - Filters test 027

Parameters for: reducePalette filter

To change image, drag-and-drop an image file over the canvas

When calculating the "commonest colors" palette, color selection is dependent on the "minimum color distance" attribute - changing this will affect colors selected for the palette. Be aware that every image is different: settings that produce a good result in one image will produce terrible results for other images.

Palette string (predefined grays)
Palette array (string colors)
Palette number (commonest colors)
Min color distance (for commonest colors)
Noise type (for dithers)
Random seed (for dithers)
Opacity
Memoize filter
Screen capture image of the filtered canvas
Screen capture image of the unfiltered canvas

To note: Javascript is not running in this browser environment. The canvas element is ignored; instead a placeholder image displays where the canvas would have appeared.

Test purpose

Note that this is a resource-intensive filter. Memoization is strongly advised!

Touch test: not required

Known issue (2024-08-26): Beyond the simplest of predefined grayscale settings, this filter can becomes very computationally intensive (thus very slow). Performance in Firefox and Safari browsers appears to be significantly worse than in Chrome. Wherever possible, memoize the filter output to prevent significant page performance degradation!

Known issue (2024-08-26): Safari browser does not like named colors strings - eg: 'red' - in a palette defined as an array of color strings, but seems happy to process structured color strings - eg: 'rgb(255 0 0)'. Firefox and Chrome just get on with the job (as normal).

Annotated code