You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

get-canvas-pixel-color

Package Overview
Dependencies
0
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

get-canvas-pixel-color

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


Version published
Maintainers
1
Created

Readme

Source

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)

parameterdescription
canvasType: canvas element or canvas context, required
The canvas from which to take the color
xType: number, required
The x coordinate of the pixel to read
yType: number, required
The y coordinate of the pixel to read
@returnsType: 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

Keywords

FAQs

Package last updated on 11 Mar 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc