title: How do you simply obtain an array of pixel data from an image?
body: <p>Thank you all for responding. I should have been more specific with my question. I looked at a number of examples, but here is the one from W3 Schools (thank you @Pointy for pointing out that this is not a source one should rely on - no pun intended). </p>
  
  <p><a href="http://www.w3schools.com/tags/canvas_getimagedata.asp">http://www.w3schools.com/tags/canvas_getimagedata.asp</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  
    &lt;img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277"&gt;
  
    &lt;canvas id="myCanvas" width="220" height="277" style="border:1px solid #d3d3d3;"&gt;
      Your browser does not support the HTML5 canvas tag.
    &lt;/canvas&gt;
  
    &lt;script&gt;
      document.getElementById("scream").onload = function () {
      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      var img = document.getElementById("scream");
      ctx.drawImage(img, 0, 0);
      var imgData = ctx.getImageData(0, 0, c.width, c.height);
      // invert colors
      for (var i = 0; i &lt; imgData.data.length; i += 4) {
          imgData.data[i] = 255 - imgData.data[i];
          imgData.data[i + 1] = 255 - imgData.data[i + 1];
          imgData.data[i + 2] = 255 - imgData.data[i + 2];
          imgData.data[i + 3] = 255;
      }
      ctx.putImageData(imgData, 0, 0);
  };
    &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>First of all I am a bit confused since the example on the W3 Schools website shows the pixel colors of the image being inverted, but when I copy the code into Sublime Text 2, save it, and open it in Chrome, the pixel colors of the image do not become inverted and the image just appears exactly the same again next to it. </p>
  
  <p>My main question is how can I add a line to this code to show the entire array of pixel data for the image? </p>
  
  <p>I added an empty div with an id of "data" below the image and added the following code but the entire array of pixel data did not appear:</p>
  
  <pre><code>document.getElementById("data").innerHTML=imgData.data;
  </code></pre>
  
  <p>I also tried to see at least the length of the pixel data array by adding the follow, but it did not work:</p>
  
  <pre><code>document.getElementById("data").innerHTML=imgData.data.length;
  </code></pre>
  
  <p>I have looked at a few examples of manipulating image pixel data from various sources and attempted a number of times to get the entire array of pixel data but was not able to. </p>
  
  <p>I would like to view the array of pixel data to recognize characters or imagery within the picture and to begin to see patterns that may emerge from specific things in the image. </p>
  
  <p>Thanks so much for your help. </p>