CanvasPixelArray object

Object returned by the data property of a CanvasImageData. Provides indexed access to color and alpha values (RGBA) of pixels for CanvasImageData objects.

Members

The CanvasPixelArray object has these types of members:

Properties

Properties

The CanvasPixelArray object has these properties.

Property	Access type	Description
length	Read/write	Gets or sets the number of pixel entries in a CanvasPixelArray object.

Standards information

HTML Canvas 2D Context, Section 1

Remarks

A common task is to use values returned from a mouse or pointer event to calculate a pixel value of an canvas image that the user clicked or touched. Mouse or pointer events in Internet Explorer 10 and later return sub-pixel values that return incorrect data when used in pixel lookup calculations in a CanvasPixelArray.

For example, to calculate the colors of a pixel clicked on an image, use the formula var ix = ((mouse.offsetY * canvas.width)+ mouse.offsetX)*4;. The ix value is used as an index into the CanvasImageData array. The first index value is the red value, followed by green (ix+1), blue (ix + 2), and alpha (ix+3).

Windows 7 returns mouse coordinates as integers, such as "offsetY = 220", and "offsetX = 135", so the calculation works correctly with an index of 352540. However, starting with Internet Explorer 10, a mouse click event returns "offsetY = 220.3441", and "offsetX = 135.4432", on a canvas that's 400 pixels wide, the index is index of 353092.3328. If this index is used to look up a pixel value, it returns an undefined value.

Even when the calculated number is rounded to an integer value (353092), it returns the incorrect pixel. By rounding individual mouse offset values to 220 and 135, the result is an index value of 352540, the correct pixel is returned. The following example below shows a way to avoid rounding errors:

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 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. See the example in action.

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

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>