https://github.com/stephentuso/histogram-canvas

Draws a photo histogram on a canvas
https://github.com/stephentuso/histogram-canvas

canvas javascript photography

Last synced: 8 days ago
JSON representation

Draws a photo histogram on a canvas

• Host: GitHub
• URL: https://github.com/stephentuso/histogram-canvas
• Owner: stephentuso
• License: mit
• Created: 2017-05-09T06:16:07.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-03-14T04:23:52.000Z (over 6 years ago)
• Last Synced: 2023-08-24T02:50:45.549Z (about 1 year ago)
• Topics: canvas, javascript, photography
• Language: JavaScript
• Size: 102 KB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# histogram-canvas

[![npm](https://img.shields.io/npm/v/histogram-canvas.svg)](https://www.npmjs.com/package/histogram-canvas) [![Build Status](https://travis-ci.org/stephentuso/histogram-canvas.svg?branch=master&style=flat-square)](https://travis-ci.org/stephentuso/histogram-canvas)

![Preview Image](https://raw.githubusercontent.com/stephentuso/histogram-canvas/master/preview.png)

## Install

```

yarn add histogram-canvas

```

or

```

npm i --save histogram-canvas

```

## Usage

Import it:

```javascript

const HistogramCanvas = require('histogram-canvas')

```

or include the standalone file, which is attached on each [release](https://github.com/stephentuso/histogram-canvas/releases) or found in the `dist` folder when downloaded from the npm registry:

```html

```

The constructor takes a `Canvas` and an optional options object:

```javascript

let histogram = new HistogramCanvas(canvas, options)

```

## Methods

`update(data, dontClear)`

 - `data` Object


    Object with properties `red`, `green`, and `blue`, each arrays of numbers, representing the heights of the histogram bars. Arrays can be any length.

 - `dontClear` Boolean (false)


    If true, the canvas will be cleared.

## Options

Can be passed in constructor options object and are available as properties on the instance.

Default values are in parentheses.

 - `red` Boolean (true)


    Whether or not to draw red graph.

 - `green` Boolean (true)


    Whether or not to draw green graph.

 - `blue` Boolean (true)


    Whether or not to draw blue graph.

 - `redColor` String ('#FF0000')


    Color for drawing red data

 - `greenColor` String ('#00FF00)


    Color for drawing green data

 - `blueColor` String ('#0000FF')


    Color for drawing blue data

 - `compositeOperation` String ('screen')


    See [options here](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation)

The following are for drawing the histogram at a specific location in the canvas. By default the histogram will fill the canvas.

 - `x` Number (0)


    X coordinate of left side of histogram

 - `y` Number (canvas.height)


    Y coordinate of bottom of histogram

 - `width` Number (canvas.width)


    Width of histogram

 - `height` Number (canvas.height)


    Height of histogram

## License

MIT © Stephen Tuso