Filters

Filters provide a modular way to make adjustments to the rendering contexts of shapes. In this way we can inherit traits from multiple sources without the need for multiple inheritance. Each render function dictates its own filters to be applied at draw time. As such, filters are only relevant within the context of render functions.

Skittle provides several kinds of filters.

export {default as Circle} from './circle';
export {default as ClearShadow} from './clear-shadow';
export {default as Fill} from './fill';
export {default as Image} from './image';
export {default as Rect} from './rect';
export {default as Stroke} from './stroke';
export {default as Style} from './style';
export {default as StyleBackground} from './style-background';
export {default as StyleBorder} from './style-border';
export {default as StyleOpacity} from './style-opacity';
export {default as StyleShadow} from './style-shadow';
export {default as StyleTransform} from './style-transform';

They can be accessed by importing Filters.

import { Filters } from '@truefusion/skittle';

All filters provided by skittle require that the first parameter be reserved for the rendering context of the canvas. Any additional parameters would be relevant only to that filter.

function (ctx: RenderingContext);

Custom filters

Filters are simply functions that make adjustments to the rendering context of the canvas. They exist only to help keep things DRY. No registration is required for filters. Their use is entirely optional.