[![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)

# tsParticles Filter Effect

[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/effect-filter/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/effect-filter)
[![npmjs](https://badge.fury.io/js/@tsparticles/effect-filter.svg)](https://www.npmjs.com/package/@tsparticles/effect-filter)
[![npmjs](https://img.shields.io/npm/dt/@tsparticles/effect-filter)](https://www.npmjs.com/package/@tsparticles/effect-filter) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)

[tsParticles](https://github.com/tsparticles/tsparticles) additional filter effect.

## How to use it

### CDN / Vanilla JS / jQuery

The CDN/Vanilla version JS has one required file in vanilla configuration:

Including the `tsparticles.effect.filter.min.js` file will export the function to load the effect:

```text
loadFilterEffect
```

### Usage

Once the scripts are loaded you can set up `tsParticles` and the effect like this:

```javascript
(async () => {
  await loadFilterEffect(tsParticles);

  await tsParticles.load({
    id: "tsparticles",
    options: {
      /* options */
      /* here you can use particles.effect.type: "filter" */
    },
  });
})();
```

### ESM / CommonJS

This package is compatible also with ES or CommonJS modules, firstly this needs to be installed, like this:

```shell
$ npm install @tsparticles/effect-filter
```

or

```shell
$ yarn add @tsparticles/effect-filter
```

Then you need to import it in the app, like this:

```javascript
const { tsParticles } = require("@tsparticles/engine");
const { loadFilterEffect } = require("@tsparticles/effect-filter");

(async () => {
  await loadFilterEffect(tsParticles);
})();
```

or

```javascript
import { tsParticles } from "@tsparticles/engine";
import { loadFilterEffect } from "@tsparticles/effect-filter";

(async () => {
  await loadFilterEffect(tsParticles);
})();
```

## Safari compatibility

As specified in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter), canvas
filter is not enabled by default in Safari (and Safari for iOS).

It can be enabled in the browser settings, so be careful with this effect if the target user could use Apple Devices.