title: How do I fix blurry shape edges in HTML5 canvas?
body: <p>I made a very simple rectangle using the canvas element. However, if the arguments for x and y in fillRect(x, y, width, height) are ANYTHING other than 0 and 0, all of the edges look completely blurry when zoomed in and/or on mobile devices. If x and y ARE 0 and 0, the top and left edges of the rectangle are super defined, even if zoomed in, while the bottom and right edges are blurry. I am rendering this on a 1920x1080 screen using Chrome/Firefox as well as a 750x1334 mobile screen using Safari.</p>
  
  <p>This isn't a problem on desktop when zoomed at 100%, but on mobile devices it looks like crap. And you can clearly see the blurry edges if you zoom in fully on Chrome and Firefox as well as <a href="https://jsfiddle.net/zyydjL64/" rel="noreferrer">JSFiddle</a>. I'm NOT adjusting width and height on the canvas using CSS. It's done using the canvas attributes and/or JS. The HTML I used to test this on browsers is below.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
           &lt;meta charset="utf-8"&gt;
           &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
           &lt;canvas id="gameCanvas" width="150" height="150"&gt;A game.&lt;/canvas&gt;
  
           &lt;script&gt;
               var canvas = document.getElementById("gameCanvas");
               var ctx = canvas.getContext("2d");
  
               ctx.fillRect(0, 0, 100, 100);
           &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Edit: I'm NOT trying to draw a 1 pixel line. I tried experimenting with half pixel values as well but it made the blurry edges alot worse. </p>
  
  <p>The first two screenshots are from an iPhone 7 screen on Safari, non-zoomed and zoomed, respectively. The last screenshot is on a 1920x1080 laptop screen, zoomed in on Chrome.</p>
  
  <p><a href="https://i.stack.imgur.com/jOphv.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/jOphv.jpg" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/OnDtV.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/OnDtV.jpg" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/0vB7i.png" rel="noreferrer"><img src="https://i.stack.imgur.com/0vB7i.png" alt="test"></a></p>