How can I get the pixel color value of an image in javascript?
I have an image like this: 
Click on the image to create a red circle.
so that a red circle is created in the forest, I don't want the red circle to be created outside the forest.
For this, I want to compare the backgroundcolor and the background value of the red circle created by clicking.
I am wondering how can I get the pixel color value of the clicked image.
There is a whole section on HTML spec for image manipulation. https://html.spec.whatwg.org/multipage/canvas.html#pixel-manipulation
But concretely, one possibility is to use the getImageData function : https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas#getting_the_pixel_data_for_a_context
This article helped me a lot for this kind of thing : https://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays/
Here my example of a basic implementation (I'm using Typescript for make it simpler):
function GetColorPixel( context: CanvasRenderingContext2D, x: number, y: number ): Array<number> { const imageData: Uint8ClampedArray = context.getImageData(x, y, 1, 1).data const rgbColor: Array<number> = [imageData[0], imageData[1], imageData[2]] return rgbColor } In this function, you need to pass the context of canvas for example
