title: html5 canvas is not showing full image
body: <p>My image size is 940 * 300 but html5 canvas showing only part of image in chrome. Can you please help how to fix this?</p>
  
  <p>Below is the code</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;style&gt;&lt;/style&gt;
      &lt;/head&gt;
      &lt;body onload="draw();"&gt;
          &lt;p&gt;Drag me&lt;/p&gt;
          &lt;canvas id="paint_area"&gt;&lt;/canvas&gt;
  
          &lt;script&gt;
              function draw() {
                  var ctx = document.getElementById('paint_area').getContext('2d');
  
                  //ctx.fillStyle = '#cc3300';
  
                  var img_buffer = document.createElement('img');
                  img_buffer.src = 'http://www.jobcons.in/homebanner.jpg';
                  var imgWidth = img_buffer.width;
                  var imgHeight = img_buffer.height;
                  ctx.width = imgWidth;
                  ctx.height = imgHeight;
                  ctx.drawImage(img_buffer,0,0,imgWidth,imgHeight);
              }
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>