title: Changing Resolution of HTML Canvas
body: <p>I am trying to change the resolution of the HTML canvas. (Not the width and height). The canvas should maintain the same width and height as the screen, but the rendering resolution should be changeable. I can kind of replicate what I want by using the zoom feature in the browser, but I am wondering if there is a programmatic way to do this. Here is what I have attempted:</p>
  
  <pre><code>function resize() {
      screenWidth = mathRound(window.innerWidth);
      screenHeight = mathRound(window.innerHeight);
      calculateUIScale();
      var scaleFillNative = Math.max(screenWidth / maxScreenWidth, screenHeight / maxScreenHeight);
      c.width = screenWidth;
      c.height = screenHeight;
      graph.setTransform(scaleFillNative, 0, 0, scaleFillNative, ((screenWidth - (maxScreenWidth * scaleFillNative)) / 2), ((screenHeight - (maxScreenHeight * scaleFillNative)) / 2));
      graph.imageSmoothingEnabled = false;
      graph.webkitImageSmoothingEnabled = false;
      graph.mozImageSmoothingEnabled = false;
  }
  </code></pre>
  
  <p>This makes the canvas fit to the screen. I am wondering if you can scale the canvas element somehow to simulate a different resolution. </p>
  
  <p>I have tried to do this:</p>
  
  <pre><code>c.width = 40;
  c.style.width = 400;
  </code></pre>
  
  <p>But the canvas is just really small now.</p>