https://github.com/misterhat/sprite-colour

Create a colourized canvas from an existing canvas or image.
https://github.com/misterhat/sprite-colour

Last synced: 1 day ago
JSON representation

Create a colourized canvas from an existing canvas or image.

• Host: GitHub
• URL: https://github.com/misterhat/sprite-colour
• Owner: misterhat
• Created: 2016-02-24T18:34:54.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-02-24T18:44:53.000Z (over 8 years ago)
• Last Synced: 2023-08-05T04:04:58.320Z (over 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 2.93 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# sprite-colour

Create a colourized canvas from an existing canvas or image.

## Install

    $ npm install sprite-colour

## Example

```javascript

var colourize = require('sprite-colour'),

    Canvas = require('canvas-browserify');

var image = new Canvas.Image();

image.onload = function () {

    var coloured = colourize(image, '#af0000', 2);

    if (process.browser) {

        document.body.appendChild(coloured);

    } else {

        process.stdout.write(coloured.pngStream());

    }

};

image.src = './brick.png';

```

    $ node example.js > test.png

![grey brick](./brick.png)

*brick.png*

![red brick](./test.png)

*test.png*

## API

### colourize(canvas, colour, [shade], [section])

Apply colour to grey (equal RGB) pixels. Returns a `Canvas` object.

`canvas` is the source image to apply the colour to, and can be a `Canvas` or

`Image` object.

`colour` is the colour to apply to each grey pixel.

`shade` is the divisor of applying `colour` to non-grey pixels. If `0`, ignore

non-grey pixels completely.  **Default** is `0`.

`section` is the rectangle describing the sprite in `canvas`. Properties:

```javascript

{

    x: Number, // 0

    y: Number, // 0

    width: Number, // canvas.width

    height: Number // canvas.height

}

```

## License

LGPLv3+