title: Why is HTML5 Canvas blurry?
body: <p>I have a canvas that is supposed to fill 100% of its parent div and scale height based on a ratio. The image that is placed in it is supposed to fill the canvas's height while scaling its width so it doesn't get distorted. That seems to be working but everything on the canvas is really blurry. Why is this happening and how might I display crisp images, shapes and text?</p>
  <p><a href="https://i.stack.imgur.com/o4b4m.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o4b4m.png" alt="enter image description here" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const photo = 'https://docplayer.net/docs-images/54/10835314/images/page_1.jpg';
  const canvasRef = document.getElementById('canvas');
  const mugRatioWidth = 2681;
  const mugRatioHeight = 1110;
  const canvasRatio = mugRatioHeight / mugRatioWidth;
  const img = new Image();
  const ctx = canvasRef.getContext("2d");
  canvasRef.style.width = '100%';
  
  img.src = photo;
  img.onload = () =&gt; {
         const hRatio = canvasRef.width  / img.width  ;
         const vRatio =  canvasRef.height / img.height  ;
         const ratio  = Math.min ( hRatio, vRatio );
         const centerShift_x = ( canvasRef.width - img.width*ratio ) / 2;
         const centerShift_y = ( canvasRef.height - img.height*ratio ) / 2;
         ctx.clearRect(0,0,canvasRef.width, canvasRef.height);
         ctx.drawImage(img, 0,0, img.width, img.height, centerShift_x,centerShift_y,img.width*ratio, img.height*ratio);
          ctx.beginPath();
          ctx.arc(100, 75, 50, 0, 2 * Math.PI);
          ctx.stroke();
          ctx.fillText("Text example!", 10, 90);
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id='canvas'/&gt;</code></pre>
  </div>
  </div>
  </p>