title: Converting bytes to an image for drawing on a HTML5 canvas
body: <p>Anyone know how I would convert bytes which are sent via a websocket (from a C# app) to an image? I then want to draw the image on a canvas. I can see two ways of doing this:  </p>
  
  <ul>
  <li>Somehow draw the image on the canvas in byte form without converting
  it. </li>
  <li>Convert the bytes to a base64 string somehow in javascript then
  draw.</li>
  </ul>
  
  <p>Here's my function which receives the bytes for drawing:  </p>
  
  <pre><code>function draw(imgData) {
  
      var img=new Image();
      img.onload = function() {
          cxt.drawImage(img, 0, 0, canvas.width, canvas.height);
      };
  
  // What I was using before...
  img.src = "data:image/jpeg;base64,"+imgData;
  
  }
  </code></pre>
  
  <p>I was receiving the image already converted as a base64 string before, but after learning that sending the bytes is smaller in size (30% smaller?) I would prefer to get this working. I should also mention that the image is a jpeg.  </p>
  
  <p>Anyone know how I would do it? Thanks for the help. :)</p>