get-canvas-pixel-color

Micro module to get the color of a single pixel on a HTML canvas

This is a convenience method around the canvas getImageData API for just one pixel. If you need to get the color of a lot of pixels at once, it's best to use the underlying API: it's more efficient because you can specify the coordinates of the patch.

Usage

var canvas = document.querySelector('canvas');
var color = getCanvasPixelColor(canvas, 200, 10); // returns an array/object
//==> [255, 0, 100, 0.9]
//==> {r:255, g:0, b:100, a:0.9, rgb:'rgb(255,0,100)', rgba:'rgba(255,0,100,0.9)'}
var red = color.r; // 255
var red = color[0]; // 255
var alpha = color.a; // 0.9
var cssString = color.rgb; // 'rgb(255,0,100)'

With browserify

npm install --save get-canvas-pixel-color

var getCanvasPixelColor = require('get-canvas-pixel-color');

Alternative usage in ES6

import getCanvasPixelColor from 'get-canvas-pixel-color';

let canvas = document.querySelector('canvas');
let {r, g, b} = getCanvasPixelColor(canvas, 200, 10);

API

`getCanvasPixelColor(canvas, x, y)`

parameter	description
`canvas`	Type: `canvas element` or `canvas context`, required The canvas from which to take the color
`x`	Type: `number`, required The x coordinate of the pixel to read
`y`	Type: `number`, required The y coordinate of the pixel to read
`@returns`	Type: `array/object` see usage example

Files

Here's an explanation of the files included in this repo

index.js: source file, in ES6
dist/get-canvas-pixel-color.js: browser-ready file with AMD or a global variable called getCanvasPixelColor
dist/get-canvas-pixel-color.min.js: same as above, minified

Dependencies

No dependencies.

fregante/get-canvas-pixel-color