Bonsai provides a number of filters which can be applied to Shapes, Bitmaps and Text. Here’s en example of the blur filter being used


Here’s an example of applying a DropShadow filter to a circle shape:

new Circle(50, 50, 30).addTo(stage)
  .fill(gradient.linear(0, ['red', 'yellow']))
  .attr('filters', new filter.DropShadow(1, 1, 5, 0x000000FF));

Available filters

See the filter module »

Remove filters

To remove filters from an object, you need to set the filters attribute to null:

thing.attr('filters', null);

To remove individual filters you’ll want to retrieve the filters array (thing.attr('filters')) and then mutate as you wish, and then re-set filters, with thing.attr('filters', ...).

For example, here I add two filters (blur and saturate) and then remove the second one:

var c = new Circle(50, 50, 30).addTo(stage);

// Add blur and saturate
  [filter.blur(4), filter.saturate(5)]

// Re-set filters, but this time JUST the blur filter
// (removing the saturate filter)
  c.attr('filters').slice(0, 1)