How to Get the RGB Value of a Pixel Under the Mouse on a Canvas?

Retrieving Pixel Color under Mouse on Canvas Using Mousemove

In web applications, it is often useful to obtain the RGB value of the pixel directly beneath the mouse cursor when it interacts with a canvas element. Here's how to achieve this in JavaScript:

Example:

Consider this HTML code:

<code class="html"><canvas id="canvas" width="200" height="200"></canvas>
<div id="color-value"></div></code>

And the following JavaScript code:

<code class="js">const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

// Set up an image on the canvas
const img = new Image();
img.src = "path/to/image.jpg";

img.onload = function() {
  context.drawImage(img, 0, 0);
};

// Add event listener for mouse movement
canvas.addEventListener("mousemove", (e) => {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  
  const pixelData = context.getImageData(x, y, 1, 1).data;
  const r = pixelData[0];
  const g = pixelData[1];
  const b = pixelData[2];
  
  document.getElementById("color-value").innerHTML = `RGB: ${r}, ${g}, ${b}`;
});</code>

In this example, the drawImage method is used to display an image on the canvas. When the mouse moves over the canvas, the mousemove event listener captures the current mouse position and calculates the pixel coordinates within the canvas using the getBoundingClientRect function. It then retrieves the pixel data using the getImageData method and displays the RGB values in the color-value div.

Additional Notes:

• The pixelData array returned by getImageData contains four values: red, green, blue, and alpha (transparency).
• The event listener can be modified to perform other actions, such as rendering a tooltip or updating a UI element.
• This technique can be extended to work with dynamic content on the canvas, such as drawn shapes or moving objects.

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