How to Get the Pixel Color Under the Mouse on a Canvas in JavaScript?

Getting Pixel Color from Canvas on Mouse Move

The mousemove event can be used to track the position of the user's mouse as it moves over a canvas element. By getting the mouse position relative to the canvas and using the getImageData() method, it's possible to retrieve the RGB values of the pixel under the mouse cursor.

To get the pixel color under the mouse in JavaScript, follow these steps:

1. Get the canvas context: Obtain the 2D rendering context (a drawing surface) of the canvas element using getContext('2d').
2. Listen for mousemove events: Add a mousemove event listener to the canvas element.
3. Get the mouse position: Inside the mousemove event handler, get the position of the mouse cursor relative to the canvas using e.offsetX and e.offsetY.
4. Get the pixel color: Use getImageData(x, y, 1, 1) to get the image data for the specified pixel location and store the result in a variable.
5. Parse the pixel color: The getImageData() method returns an array of four values, representing the red, green, blue, and alpha channels of the pixel.

Example Code

Here's a complete example that demonstrates how to get the pixel color under the mouse:

This example will log the RGB color of the pixel under the mouse cursor to the console when the mouse moves over the canvas.

The above is the detailed content of How to Get the Pixel Color Under the Mouse on a Canvas in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!