title: Cannot get Image Data from a canvas
body: <p>The following function should get image data (using <code>context.getImageData()</code> from an exisitng canvas, containing an image (already loaded on the webpage), and a second canvas that is not shown on the page.</p>
  
  <p>The first canvas' data is "got"as expected, and <code>alert(data1.data.length)</code> pops up with a reasonable number. However the second canvas' data is not "got" got, and the function breaks before the <code>alert(data2.data.length);</code> line. That is the only line that does not seem to work in the whole function, and is my problem.</p>
  
  <pre><code>function operateImage(){
  
      var operand = new Image();
      var data1, data2;
      //exisiting canvas
      var c =document.getElementById("edit_canvas");
      var ctx=c.getContext("2d");
  
      var operation = document.getElementById("operation").value;
  
      //make a new temporary canvas and store the input image
      var hiddenCanvas = document.createElement('canvas');
      var hiddenCtx = hiddenCanvas.getContext('2d');
      operand.src = document.getElementById("operation_image").value; 
      hiddenCanvas.width = operand.width;
      hiddenCanvas.height = operand.height;
  
      hiddenCtx.drawImage(operand,0,0);
      //get image data objects from both canvases
      data1 = ctx.getImageData(0,0,c.width,c.height);
      alert(data1.data.length);
      data2 = hiddenCtx.getImageData(0,0,hiddenCanvas.width,hiddenCanvas.height);
      alert(data2.data.length);
  
      /*pass the two image data objects to another function for processing*/
  }
  </code></pre>
  
  <p>After the function gets the image data it will pass them to another function depending on the operation value. (which will AND, OR, XOR, or NOT the contents of the pixel data arrays together)</p>
  
  <p>Edit: This is an error message I get: " Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data."</p>