CanvasImageData object

Provides an object that can represent a rectangle of pixels of a given width and height in CSS pixels.

Members

The CanvasImageData object has these types of members:

Properties

Properties

The CanvasImageData object has these properties.

Property	Description
data	Gets the CanvasPixelArray object that contains image data for a given CanvasImageData object.
height	Gets the number of rows of physical device pixels in the CanvasImageData object.
width	Gets the number of physical device pixels in a row of the CanvasImageData object.

Standards information

HTML Canvas 2D Context, Section 1

Remarks

CanvasImageData represents a block of image data that you can use to manipulate canvas images. Using the getImageData method, you can return image data from a canvas. With the CanvasImageData object, you can access the image down to a pixel, and modify it using the RGBA format.

For an example that shows the CanvasImageData object in action for sampling and changing colors, see Sampling image colors with Canvas.

Note If you are developing on an intranet and have rendering issues for HTML5, you can add a "meta http-equiv-'X-UA-Compatible' content= " meta command, followed by "IE=edge" to the <head> block of a webpage to force Windows Internet Explorer to use the latest standards. For more information about document compatibility, see Defining Document Compatibility.

Examples

The following code shows how to get a pixel on a canvas based on a mouse click. The code uses parseInt() to ensure that the x and y values are integers because Internet Explorer 10 and later return mouse coordinates as floats to represent fractional pixels.

The example displays an image that when you click on a point on the photo, it takes the color in the imageData array and uses it to display a background. There are two conversion functions, one to convert a decimal to a hex, and the other to build a color string.

Photo of a cat with the a point clicked and the color in the data image array used for the background.

See the example in action.

HTML


<!DOCTYPE html>
<html>
<head>
<title>imageData example</title>
 
</head>
<body>
 <canvas id="MyCanvas" width="600" height="500">This browser or document mode doesn't support canvas</canvas>
 <img id="pix" src="frankie1.jpg" />; 
 <div id="myDiv"></div>

  <script>
    var canvas = document.getElementById("MyCanvas");
    if (canvas.getContext) {
      var ctx = canvas.getContext("2d");                // Get the context.
      var image = document.getElementById("pix");

      //  Do this once image loads

      image.addEventListener("load", function () {
      ctx.clearRect(0, 0, canvas.width, canvas.height);    // Clear the last image, if it exists.
      var x = (canvas.width - image.width) / 2;
      var y = (canvas.height - image.height) / 2;
      ctx.drawImage(image, x, y);
      image.style.display = "none"; // remove original image
      },false);
    }

    canvas.addEventListener("click", function (evt) {
      //  get mouse coordinates from event parameter
      var mouseX = parseInt(evt.offsetX);
      var mouseY = parseInt(evt.offsetY);

      //  get imageData object from canvas
      var imagedata = ctx.getImageData(0, 0, canvas.width, canvas.height);

      //  get pixelArray from imagedata object
      var data = imagedata.data;  

      //  calculate offset into array for pixel at mouseX/mouseY
      var i = ((mouseY * canvas.width) + mouseX) * 4;

      //  get RGBA values
      var r = data[i];        
      var g = data[i+1];
      var b = data[i+2];
      var a = data[i+3];
      var display = document.getElementById("myDiv");
      display.innerText = "Red: " + r + "  Green: " + g + "  Blue: " + b + "  Alpha: " + a;
      canvas.style.backgroundColor = getHex(data, i);
    },false);

    function getHex(data, i) {
      //  Builds a CSS color string from the RGB value (ignore alpha)
      return ("#" + d2Hex(data[i]) + d2Hex(data[i + 1]) + d2Hex(data[i + 2]));
    }

    function d2Hex(d) {
      // Converts a decimal number to a two digit Hex value
      var hex = Number(d).toString(16);
      while (hex.length < 2) {
        hex = "0" + hex;
      }
      return hex.toUpperCase();
    }

  </script>

</body>
</html>