title: Loss of quality while adding drawing image on HTML 5 canvas from binary string
body: <p>I am trying to draw an image from binary string on to the canvas.</p>
  
  <pre><code> var reader = new FileReader();
       //reader.readAsDataURL(file);
       reader.readAsBinaryString(file);
       reader.onload = function(event){
           var d = $(thisObj.CreateIndoorFormDivControlName).dialog();
           var canvas =document.getElementById('canvasfloorLayout');
          var cxt=canvas.getContext("2d");
           var img=new Image();
              img.onload = function() {
                  cxt.drawImage(img, 0, 0,canvas.width,canvas.height);
              }
              img.src = "data:image/jpeg;base64,"+window.btoa(reader.result);
  </code></pre>
  
  <p>I am using the above code but the problem is the image size is getting reduced to the canvas size and quality is dropping like anything. I have been tried with</p>
  
  <pre><code>cxt.drawImage(img, 0, 0,img.width,img.height);
  </code></pre>
  
  <p>But the image gets cropped. 
  I donot want to use reader.readAsDataURL as I need to post the binary to the server. My requirement is to show the full image and draw lines on it .</p>