title: Receiving image through websocket
body: <p>I am using <code>websockify</code> to display images from a python server to a HTML5 canvas.</p>
  
  <p>I think that I have manage to successfully send images from my python server but I am not able to display the images to my canvas.</p>
  
  <p>I think the problem has to do with the number of bytes that I am trying to display on canvas and I believe that I am not waiting until the whole image is received and then displaying the image to the canvas.</p>
  
  <p>Until now I have:</p>
  
  <p>The on message function. When I sent an image I get 12 <code>MESSAGERECEIVED</code> in console</p>
  
  <pre><code>  ws.on('message', function () {
      //console.log("MESSAGERECEIVED!")
              msg(ws.rQshiftStr());
    });
  </code></pre>
  
  <p>The msg function where I receive the string and I am trying to display it on canvas. I invoking the method 12 times for each picture. The format of the sting is <code>'xÙõKþ°pãüCY</code> :</p>
  
  <pre><code>function msg(str) {
          //console.log(str);
          console.log("RELOAD");
  
          var ctx = cv.getContext('2d');
          var img = new Image();
          //console.log(str);
          img.src = "data:image/png;base64," + str;
          img.onload = function () {
              ctx.drawImage(img,0,0);
          }
      }
  </code></pre>
  
  <p>Any suggestions on how to fix this?</p>