Ever had a problem getting the color of a pixel from a canvas? Well I spent a week figuring it out so you don't have to.
function getColorOnCanvas(x, y, canvasElement){
let imageData = canvasElement.getContext('2d').getImageData(0,0,canvasElement.width, canvasElement.height).data;
let f = function(x1,y1,width){return y1 * (width * 4) + x1 * 4;}
let red = imageData[f(x,y,canvasElement.width)];
let green = imageData[f(x,y,canvasElement.width)+1];
let blue = imageData[f(x,y,canvasElement.width)+2];
let alpha = imageData[f(x,y,canvasElement.width)+3];
return {
red: red,
green: green,
blue: blue,
alpha: alpha
};
};
or, if you're feeling fancy
function getColorOnCanvas(x, y, canvasElement, canvasContext){
let imageData = canvasContext.getImageData(0,0,canvasElement.width, canvasElement.height).data;
let f = function(x1,y1,width){return y1 * (width * 4) + x1 * 4;}
let red = imageData[f(x,y,canvasElement.width)];
let green = imageData[f(x,y,canvasElement.width)+1];
let blue = imageData[f(x,y,canvasElement.width)+2];
let alpha = imageData[f(x,y,canvasElement.width)+3];
return {
red: red,
green: green,
blue: blue,
alpha: alpha
};
};
Top comments (0)