HTML5 Canvas ImageData assignment acting weird

I can't figure out why this isn't working. I draw an image onto a canvas, use getImageData, manipulate the pixels and then store that array of pixels for later. When I'm ready to draw those pixels later, I use createImageData on another, identically sized canvas, set the resulting ImageData object's data property to the array of pixels I saved and then call putImageData. The result: the saved array data isnt assigned to the ImageData object. Below is the code for a test page:

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en-US' lang='en-US'>
<head>
 <meta http-equiv='content-type' content='text/html;charset=UTF-8' />
 <link rel="stylesheet" type="text/css" href="styles.css"  media="screen" />
 <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.min.js'&gt;&lt;/script&gt;
 <title>Audio Browser</title>
</head>
<body>

<script type='text/javascript'>
 $(document).ready(function()
 {
  var copy = document.createElement('canvas');
  var viewer = $('#viewer')[0];
  var output = $('#output')[0];
  var ctx = viewer.getContext('2d');
  var outputContext = output.getContext('2d');
  var img = $('#input')[0];
  var imageData;
  var songs = [];

  output.width = copy.width = img.width;
  output.height = copy.height = img.height;
  copy.getContext('2d').drawImage(img, 0, 0);

  viewer.width = 1500;
  viewer.height = 800;

  originalData = copy.getContext('2d').getImageData(0, 0, copy.width, copy.height);
  imageData = originalData.data;

  for(var i = 3; i < imageData.length; i+=4)
  {
   var row = Math.floor(i / copy.width / 4);

   imageData[i] *= 1-((copy.height - row)/copy.height*2);
  }

  songs.push({'fadeImg' : imageData});


  draw();

  function draw()
  {
   originalData = copy.getContext('2d').createImageData(copy.width, copy.height);

   originalData.data = songs[0].fadeImg;

   outputContext.putImageData(originalData, 0, 0);
  }
 });

</script>

<img id='input' src='albumArt/small.png' />
<canvas id='output'></canvas>
<br />
<canvas id='viewer'></canvas>
</body>
</html>

EDIT:

I just found something interesting when trying this in the new IE9 beta. In IE, I get the following error: SCRIPT65535: Invalid set operation on read-only property on originalData.data = songs[0].fadeImg; I checked firefox before and there are no errors in the error console. Maybe firefox just silently fails. If thats the case, how can I copy the array back without an extremely wasteful for loop?

ansaurus

tags:

views:

answers:

HTML5 Canvas ImageData assignment acting weird

related questions