title: How can I scale the HTML5 canvas without making it blurry?
body: <p>I have created a canvas using the following markup:</p>
  
  <pre><code>&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>Now, if I specify <code>width</code> and <code>height</code> here directly, then the drawings on canvas will be pretty sharp.</p>
  
  <pre><code>&lt;canvas id="canvas" width="600px" height="400px"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>but this way I can't scale the canvas flexibly to cover every screen size. Using <code>vh</code> or <code>vw</code> instead of pixels doesn't work either. I tried setting them in JavaScript like:</p>
  
  <pre><code>$('#canvas').css({
     "height": window.innerHeight,
     "width": window.innerWidth
   });
  </code></pre>
  
  <p>this covered the whole canvas but made the lines blurry. Is there some way I can get sharp images while the canvas still covers whole screen?</p>
  
  <p>I tried using:</p>
  
  <pre><code>$("#canvas")
  .prop("width", window.innerWidth)
  .prop("height", window.innerHeight);
  </code></pre>
  
  <p>but the objects on the canvas (for example a circle that I drew) are still blurry. When I open up devTools, I see the following markup:</p>
  
  <pre><code>&lt;canvas id="canvas" style="height: 768px; width: 1366px;"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>So, I guess width and height are still being defined by CSS.</p>