HTML5 Canvas Image Data Tutorial

To get the image data for each pixel of a rectangular area on the canvas, we can get the image data object with the getImageData() method of the canvas context and then access the pixel data with the data property of the image data object. Each pixel in the image data is defined with four components, a red, green, blue, and alpha component. If we want to manipulate the image, we can modify the image data pixel array and then draw the new image back onto the canvas with the putImageData() method.

Note: The getImageData() method requires that the image is hosted on a web server with the same domain as the code executing it. If this condition is not met, a SECURITY_ERR exception will be thrown.

Open in new window

Code Editor

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="400"></canvas>
    <script>
      function drawImage(imageObj) {
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var imageX = 69;
        var imageY = 50;
        var imageWidth = imageObj.width;
        var imageHeight = imageObj.height;

context.drawImage(imageObj, imageX, imageY);

var imageData = context.getImageData(imageX, imageY, imageWidth, imageHeight);
        var data = imageData.data;

// quickly iterate over all pixels
        for(var i = 0, n = data.length; i < n; i += 4) {
          var red = data[i];
          var green = data[i + 1];
          var blue = data[i + 2];
          var alpha = data[i + 3];
        }

// or iterate over all pixels based on x and y coordinates.
        // loop through each row
        for(var y = 0; y < sourceHeight; y++) {
          // loop through each column
          for(var x = 0; x < sourceWidth; x++) {
            var red = data[((sourceWidth * y) + x) * 4];
            var green = data[((sourceWidth * y) + x) * 4 + 1];
            var blue = data[((sourceWidth * y) + x) * 4 + 2];
            var alpha = data[((sourceWidth * y) + x) * 4 + 3];
          }
        }

// draw the new image with the modified image data
        context.putImageData(imageData, imageX, imageY);
      }
      var imageObj = new Image();
      imageObj.onload = function() {
        drawImage(this);
      };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

</script>
  </body>
</html>

< Operations Invert Colors >

More Examples

Modified on April 9th, 2013 by Eric Rowell