title: How to scale an image dynamically using canvas
body: <p>I am trying to resize an image based on the canvas size. My code is below. The issue is that when I try to drawImage(), it draws fine but the pixels get distorted within the image.
  Any help would be highly appreciated!! I have been trying to do a lot of things like manipulating pixels using canvas imageData but with no luck at all :(</p>
  
  <pre><code>var imgURL = $('img#AS0017CF5A').attr('src');
                  imgH = $('img#AS0017CF5A').height();
                  imgW = $('img#AS0017CF5A').width();
                  $('img#AS0017CF5A').parent().attr('id','pImg');
                  $('img#AS0017CF5A').hide();
  
                  imageObj = new Image();
  
                  imageObj.onload = function(ev) {
  
                     document.getElementById('pImg').innerHTML = '&lt;canvas id="myCanvas" width="' + imgW + '" height="' + imgH + '"&gt;&lt;/canvas&gt;';
                      var toto = document.getElementById("myCanvas");
                      var c = toto.getContext("2d");
                      c.drawImage(imageObj, 0, 0, imgW, imgH);
  
                     //context.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height, 0, 0, imgW, imgH);                 
                  };
                  imageObj.src = imgURL;
  </code></pre>