title: HTML Canvas: Why Is my image on the canvas so blurry?
body: <p>I am making a grid for a pathfinding visualizer, and I am concerned that my image icon is very low resolution in the grid cell. I am not sure if this is supposed to be like this due to the small size of the image, but I thought I would ask why it is so blurry and if there is a way to fix it?</p>
  
  <p><a href="https://i.stack.imgur.com/CaxzC.png" rel="nofollow noreferrer">Original Image</a></p>
  
  <p><a href="https://i.stack.imgur.com/81V2v.png" rel="nofollow noreferrer">Image on canvas grid(low res)</a></p>
  
  <p>This is my css for the canvas:</p>
  
  <pre><code>#myCanvas{
  
      margin-left: auto;
      margin-right: auto;
      display: block;
      border: 1px solid #000000;
  
      position: absolute;
      top: 60%;
      transform: translate(0, -50%);  
      left: 0;
      right: 0;
  
      width : pixelWidth * devicePixelRatio;
      height: pixelHeight * devicePixelRatio;
  
      transform: translate(0.5, 0.5);
  }
  </code></pre>
  
  <p>This is the canvas in the html:</p>
  
  <pre><code>&lt;canvas id="myCanvas" width="1235" height="520"&gt;
  &lt;/canvas&gt;
  </code></pre>