score:1

Accepted answer

well, my requirements changed and i no longer need to worry about this, but i will post the code i used anyways:

var imgdata = context.getimagedata(0,0,canvas.width,canvas.height);

// function to find the hex color of a specific pixel in the imgdata context.
function getpixel(imgdata, index) {
    var i = index * 4, d = imgdata.data;
    return rgbtohex(d[i], d[i + 1], d[i + 2]) 
    // returns hex string of rgb values.
}

// function to caluclate offset of imgdata context and then return hex color from getpixel function call.
function getpixelfromcoordinate(imgdata, x, y) {
    return getpixel(imgdata, y * imgdata.width + x);
}

// function to convert a given rgb value to a hex string.

function rgbtohex(r, g, b) {
    // left shift values to allow for cheap hex construction
    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).tostring(16).slice(1);
}

this code worked fine, so hopefully it will be helpful to others.

reference 1: getpixel from html canvas?

reference 2: how to use javascript or jquery to read a pixel of an image when user clicks it?


Related Query

More Query from same tag