# globalcompositeoperation

> Custom implementation of build-in [globalCompositeOperation][] for [ImageData][] objects. It include all available composition operations and blend modes.

Latest version **1.0.0** (published 2017-04-14) · MIT License license · 0 weekly downloads

## Install

```sh
npm install globalcompositeoperation
pnpm add globalcompositeoperation
yarn add globalcompositeoperation
bun add globalcompositeoperation
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2017-04-14 |
| First published | 2017-04-14 |
| Weekly downloads | 0 |
| License | MIT License |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | kurz |

## Links

- npm: https://www.npmjs.com/package/globalcompositeoperation
- npm.io page: https://npm.io/package/globalcompositeoperation

## Recent versions

- 1.0.0 (latest) — 2017-04-14

## README

# globalCompositeOperation

Custom implementation of build-in [globalCompositeOperation][] for [ImageData][] objects.
It include all available composition operations and blend modes.

## Examples

Here is available the comparison [example][].

## Tests

Here you can check the [tests][] to make sure that everything is correct!

## Usage

Code example:

```javascript
// Get the proper implementation, according to required endianness:
// true - is for big endian and false as for little endian!
var composition = globalCompositeOperation(false);

var destData = destImageData.data;
var srcData = srcImageData.data;
var destStartIndex = 0;
var srcStartIndex = 0;
var pixelsCount = 100;

/**
 * @param {Uint8ClampedArray} destData [out]
 * @param {Uint8ClampedArray} srcData [in]
 * @param {Number} destStartIndex [in] - should be integer and fits in destData range
 * @param {Number} srcStartIndex [in] - should be integer and fits in srcData range
 * @param {Number} pixelsCount [in] - should be integer
 */
composition["source-over"](destData, srcData, destStartIndex, srcStartIndex, pixelsCount);
```

## Browser Capability

Should work well everywhere.
But the real goal may be achieved only on modern browsers!

## Dependencies

No external dependencies / third-party libs! Everything is you need is just a one [file][].

Based on great [Cairo][]'s compositing operators documentation.

## Feedback

For any questions/propositions/e.t.c you can contact me at <kurzgame@gmail.com>

[globalCompositeOperation]: https://developer.mozilla.org/ru/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
[ImageData]: https://developer.mozilla.org/en-US/docs/Web/API/ImageData
[example]: https://cdn.rawgit.com/kurzgame/globalCompositeOperation/master/examples/composition.html
[tests]: https://cdn.rawgit.com/kurzgame/globalCompositeOperation/master/test/index.html
[file]: https://cdn.rawgit.com/kurzgame/globalCompositeOperation/master/composition.min.js
[Cairo]: https://www.cairographics.org/operators/

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