The next step is to capture the mouse coordinates when the user clicks on an object in the scene and reads the color value for these coordinates from the offscreen framebuffer.

For that, we use the standard onmouseup event from the canvas element in our webpage:

var canvas = document.getElementById('my-canvas-id'),
canvas.onmouseup = function (ev){
//capture coordinates from the ev event
...
}

There is an extra bit of work to do here given that the ev event does not return the mouse coordinates with respect to the canvas but with respect to the upper-left corner of the browser window (ev.clientX and ev.clientY). Then, we need to bubble up through the DOM getting the location of the elements that are in the DOM hierarchy to know the total offset that we have.

We do this with a code fragment like this inside the canvas.onmouseup function:

var x, y, top = 0, left = 0, obj = canvas;
while (obj&& && obj.tagName !== 'BODY') {
top += obj.offsetTop;
left += obj.offsetLeft;
obj = obj.offsetParent;
}

The following diagram shows how we are going to use the offset calculation to obtain the clicked canvas coordinates:

Also, we take into account any page offset if present. The page offset is the result of scrolling and affects the calculation of the coordinates. We want to obtain the same coordinates for the canvas every time regardless of any possible scrolling. For that we add the following two lines of code just before calculating the clicked canvas coordinates:

left += window.pageXOffset;
top -= window.pageYOffset;

Finally, we calculate the canvas coordinates:

x = ev.clientX - left;
y = c_height - (ev.clientY - top);

Remember that unlike the browser window, the canvas coordinates (and also the framebuffer coordinates for this purpose) start in the lower-left corner as explained in the previous diagram.