Skip to content

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

License

Notifications You must be signed in to change notification settings

fregante/get-canvas-pixel-color

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

get-canvas-pixel-color (size)

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.

License

MIT © Federico Brigante

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published