Getting pixel color from canvas

Conmann — Sat, 25 Feb 2023 07:30:13 +0000

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
    };
};

DEV Community: Conmann

Getting pixel color from canvas