How to Get the RGB Color of a Canvas Pixel Under the Mouse Cursor?

Get pixel color from canvas on mousemove

Getting the RGB value of a pixel under the mouse on a canvas element is possible using the getImageData() method. This method returns a CanvasPixelArray object containing the pixel data for the specified rectangular region.

To obtain the RGB value of the pixel under the mouse cursor, you can use the clientX and clientY properties of the mouse event object to determine the position of the mouse on the canvas. You can then use these coordinates to call getImageData() on the canvas context, passing in the width and height of a 1x1 pixel region at the specified location. The returned array will contain the RGB values of the pixel.

Here's an example code snippet that demonstrates how to get the pixel color under the mouse on a canvas:

<code class="javascript">const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

canvas.addEventListener('mousemove', (e) => {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  const pixelData = ctx.getImageData(x, y, 1, 1).data;

  console.log(`The pixel at (${x}, ${y}) has the following RGB color: ${pixelData[0]}, ${pixelData[1]}, ${pixelData[2]}`);
});</code>

In this example, the mousemove event listener is attached to the canvas element. When the mouse moves over the canvas, the event listener is triggered and the clientX and clientY properties of the event object are used to calculate the coordinates of the mouse on the canvas. The getImageData() method is then called with these coordinates to retrieve the pixel data for the specified region. Finally, the pixel data is logged to the console.

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