title: Receive Blob in WebSocket and render as image in Canvas
body: <p>I'm building a simple WebSocket application that transfers binary snapshots of the current canvas to other listeners.</p>
  
  <p>The current canvas snapshot is sent using WebSocket as:</p>
  
  <pre><code>var image = context.getImageData(0, 0, canvas.width, canvas.height);
  var buffer = new ArrayBuffer(image.data.length);
  var bytes = new Uint8Array(buffer);
  for (var i=0; i&lt;bytes.length; i++) {
      bytes[i] = image.data[i];
  }
  websocket.send(buffer);
  </code></pre>
  
  <p>Trying to render the data on the receiving end as:</p>
  
  <pre><code>var bytes = new Uint8Array(blob.size);
  var image = context.createImageData(canvas.width, canvas.height);
  for (var i=0; i&lt;image.length; i++) {
      image[i] = bytes[i];
  }
  context.drawImage(image, 0, 0);
  </code></pre>
  
  <p>The blob is received correctly but the image is still not rendered.</p>
  
  <p>Any idea ?</p>