title: HTML canvas image is far lower quality than original image. Why?
body: <p>I have a simple HTML document with an image and a canvas element. The image src is just some high quality image found online, just to illustrate my point. When I try to draw the image onto the canvas, the resulting canvas image is very pixelated and low quality. I can't seem to figure out why. 
  Similar questions have been asked here, but I couldn't find an answer that seemed to solve the problem. If someone finds another post with  a working answer, please let me know. Any help is greatly appreciated. Thanks in advance!</p>
  
  <p>Here is the JSfiddle with the code:
  <a href="https://jsfiddle.net/vey309b0/5/" rel="nofollow noreferrer">https://jsfiddle.net/vey309b0/5/</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;p&gt;the original image:&lt;/p&gt;
  &lt;img id="img_cam" src="https://4.bp.blogspot.com/k8IX2Mkf0Jo/U4ze2gNn7CI/AAAAAAAA7xg/iKxa6bYITDs/s0/HOT+Balloon+Trip_Ultra+HD.jpg" width="400"&gt;
  &lt;p&gt;the canvas with drawn image:&lt;/p&gt;
  &lt;canvas id="imgcanvas" width="400"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p><strong>JavaScript:</strong></p>
  
  <pre><code>var canvas = document.getElementById("imgcanvas");
  var img_can = document.getElementById("img_cam");
  var ctx = canvas.getContext("2d");
  var imgWidth = img_can.width;
  var imgHeight = img_can.height;
  canvas.width = imgWidth;
  canvas.height = imgHeight;
  ctx.drawImage(img_can, 0, 0, imgWidth, imgHeight);
  </code></pre>