title: Build ImageData array from normal javascript array
body: <p>I have a series of functions that builds a rgba sequence array, and I'm planning to apply this data to a canvas object. I'm not sure how to convert the rgba (already in 0-255 values) into a proper imageData object that I can use .putImageData with.</p>
  
  <pre><code>var new_canvas = document.createElement('canvas');
  var mc_ctx = new_canvas.getContext('2d');
  new_canvas.width = 50;
  new_canvas.height = 50;
  var mc_imageData = mc_ctx.getImageData(0,0, 50, 50);
  var mc_px_data = mc_imageData.data;
  
  for ( var i = 0; i &lt;= rgba_array.length; i++ ) {
      mc_px_data[i] = rgba_array[i];
  }
  
  mc_ctx.putImageData(mc_imageData, 0, 0);
  </code></pre>
  
  <p>All i get is white, even though an output of the rgba_array values shows the proper stream of values.</p>