# stackblur-canvas

> Fast and almost Gaussian blur by Mario Klingemann

Latest version **3.0.1** (published 2026-03-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install stackblur-canvas
pnpm add stackblur-canvas
yarn add stackblur-canvas
bun add stackblur-canvas
```

## Health

**Score 65/100 (B)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 3.0.1 |
| Published | 2026-03-14 |
| First published | 2015-07-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=0.1.16 |
| Dependencies | 0 |
| Unpacked size | 153.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1310 |
| Author | Mario Klingemann |
| Maintainers | brettz9, flozz |
| Keywords | stackblur, blur, canvas, gaussian |

## Links

- npm: https://www.npmjs.com/package/stackblur-canvas
- Repository: https://github.com/flozz/StackBlur
- Homepage: http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
- Issues: https://github.com/flozz/StackBlur/issues
- npm.io page: https://npm.io/package/stackblur-canvas

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 3.0.1 (latest) — 2026-03-14
- 3.0.0 — 2026-02-03
- 2.7.0 — 2024-02-09
- 2.6.0 — 2023-06-05
- 2.5.0 — 2021-02-16
- 2.4.0 — 2020-08-26
- 2.3.0 — 2020-05-10
- 2.2.0 — 2018-12-13
- 2.1.0 — 2018-11-25
- 2.0.0 — 2018-11-05
- 1.4.1 — 2018-01-30
- 1.4.0 — 2016-10-20
- 1.3.0 — 2016-10-16
- 1.2.1 — 2016-04-08
- 1.2.0 — 2016-01-23
- … 2 more at https://npm.io/package/stackblur-canvas/versions

## README

# StackBlur.js

[![NPM Version](https://img.shields.io/npm/v/stackblur-canvas.svg)][pkg-npm]
[![License](https://img.shields.io/npm/l/stackblur-canvas.svg)](https://github.com/flozz/StackBlur/blob/master/COPYING)

StackBlur.js is a fast, almost Gaussian blur created by Mario Klingemann.

  * **More informations:** <http://incubator.quasimondo.com/processing/fast_blur_deluxe.php>
  * **Algorithm:** <https://medium.com/better-programming/blurring-image-algorithm-example-in-android-cec81911cd5e>
  * **Demo:** <http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html>

Original source:

  * <http://www.quasimondo.com/StackBlurForCanvas/StackBlur.js>

## Getting Started

### Standalone version

To use the standalone version,

download the [latest zip][dl-zip-master] from Github or clone the repository

```
git clone git@github.com:flozz/StackBlur.git
```

and include the `dist/stackblur.js` or `dist/stackblur.min.js` file in your HTML page:

```html
<script src="StackBlur/dist/stackblur.js"></script>
```

### Node

To use the [NPM package][pkg-npm],

install the package:

```
npm install --save stackblur-canvas
```

and require it where needed

```js
const StackBlur = require('stackblur-canvas');
```

### Browsers

If you are only supporting modern browsers, you may use ES6 Modules directly:

```js
import * as StackBlur from
  './node_modules/stackblur-canvas/dist/stackblur-es.min.js';
```

Or, if you are using Rollup in your own project, use the [node-resolve](https://github.com/rollup/rollup-plugin-node-resolve) plugin,
and import by just referencing the module:

```js
import * as StackBlur from 'stackblur-canvas';
```

## API

See also the docs in [docs/jsdoc](./docs/jsdoc/index.html).

**Image as source:**

```js
StackBlur.image(sourceImage, targetCanvas, radius, blurAlphaChannel);
```

  * `sourceImage`: the `HTMLImageElement` or its `id`.
  * `targetCanvas`: the `HTMLCanvasElement` or its `id`.
  * `radius`: the radius of the blur.
  * `blurAlphaChannel`: Set it to `true` if you want to blur a RGBA image (optional, default = `false`)

**RGBA Canvas as source:**

```js
StackBlur.canvasRGBA(targetCanvas, topX, topY, width, height, radius);
```

  * `targetCanvas`: the `HTMLCanvasElement`.
  * `topX`: the horizontal coordinate of the top-left corner of the rectangle to blur.
  * `topY`: the vertical coordinate of the top-left corner of the rectangle to blur.
  * `width`: the width of the rectangle to blur.
  * `height`: the height of the rectangle to blur.
  * `radius`: the radius of the blur.

**RGB Canvas as source:**

```js
StackBlur.canvasRGB(targetCanvas, topX, topY, width, height, radius);
```

  * `targetCanvas`: the `HTMLCanvasElement`.
  * `topX`: the horizontal coordinate of the top-left corner of the rectangle to blur.
  * `topY`: the vertical coordinate of the top-left corner of the rectangle to blur.
  * `width`: the width of the rectangle to blur.
  * `height`: the height of the rectangle to blur.
  * `radius`: the radius of the blur.

**RGBA ImageData as source:**

```js
StackBlur.imageDataRGBA(imageData, topX, topY, width, height, radius);
```

  * `imageData`: the canvas' `ImageData`.
  * `topX`: the horizontal coordinate of the top-left corner of the rectangle to blur.
  * `topY`: the vertical coordinate of the top-left corner of the rectangle to blur.
  * `width`: the width of the rectangle to blur.
  * `height`: the height of the rectangle to blur.
  * `radius`: the radius of the blur.

**RGB ImageData as source:**

```js
StackBlur.imageDataRGB(imageData, topX, topY, width, height, radius);
```

  * `imageData`: the canvas' `ImageData`.
  * `topX`: the horizontal coordinate of the top-left corner of the rectangle to blur.
  * `topY`: the vertical coordinate of the top-left corner of the rectangle to blur.
  * `width`: the width of the rectangle to blur.
  * `height`: the height of the rectangle to blur.
  * `radius`: the radius of the blur.


## Hacking

### Building

This library is built using [Rollup](https://rollupjs.org/guide/en).
If you change something in the `src/` folder, use the following command
to re-build the files in the `dist/` folder:

`npm run rollup`


[dl-zip-master]: https://github.com/flozz/StackBlur/archive/master.zip
[pkg-npm]: https://www.npmjs.com/package/stackblur-canvas
[grunt]: http://gruntjs.com/

---
_Source: https://npm.io/package/stackblur-canvas · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._