title: Serialize canvas content to ArrayBuffer and deserialize again
body: <p>I have two canvases, and I want to pass the content of canvas1, serialize it to an ArrayBuffer, and then load it in canvas2. In the future I will send the canvas1 content to the server, process it, and return it to canvas2, but right now I just want to serialize and deserialize it.</p>
  <p>I found this way of getting the canvas info in bytes:</p>
  <pre><code>var img1 = context.getImageData(0, 0, 400, 320);
  var binary = new Uint8Array(img1.data.length);
  for (var i = 0; i &lt; img1.data.length; i++) {
      binary[i] = img1.data[i];
  }
  </code></pre>
  <p>And also found this way of set the information to a <code>Image</code> object:</p>
  <pre><code>var blob = new Blob( [binary], { type: &quot;image/png&quot; } );
  var urlCreator = window.URL || window.webkitURL;
  var imageUrl = urlCreator.createObjectURL( blob );
  var img = new Image();
  img.src = imageUrl;
  </code></pre>
  <p>But unfortunately it doesn't seem to work.</p>
  <p>Which would be the right way of doing this?</p>