How do I get the pixel color associated with a location in the diagram

GoJS
#1

Is it possible to get the pixel color associated with location of a mouse click on the diagram?

It could be on the background, a graph object within a node, a border of an object and especially an image that may be embedded inside a part. Basically anywhere on the diagram.

#2

Call Diagram.makeImage, draw it to a Canvas, and look at the pixel(s).

#3

Thanks, almost works but having some strange behavior. Seems to only work intermittently.
Note the following test code:

diagramDivElem.addEventListener("click", function (event) {
var img = myDiagram.makeImage({
//position: new go.Point(event.clientX, event.clientY),
//size: new go.Size(1,1)
});


var canvas = document.createElement('canvas');   
var ctx = canvas.getContext('2d');        
ctx.drawImage(img, 0, 0);       // DRAW THE IMAGE TO THE CANVAS.

var imgd = ctx.getImageData(event.clientX, event.clientY, 1, 1).data;
var rgbaclicked = "rgba(" + imgd[0] + "," + imgd[1] + "," + imgd[2] + "," + imgd[3] + ")";


alert("Click at Point(x,y): (" + event.clientX + "," + event.clientY + ")\nImage captured: width:" + img.width +  "; height: " + img.height + "\nPixel color: " + rgbaclicked);

}, false);

I try clicking on various parts of the diagram and about 2 out of 3 times it fails to capture the image.
I get:
image

About 1 out of every 3 or 4 clicks , it DOES work and i get the actual pixel color returned in the alert.

Thoughts?

#4

Maybe you need to test asynchronously, by passing the callback option to Diagram.makeImageData.