title: Scaling a Javascript Canvas Game Properly
body: <p>I am attempting to scale my canvas game dynamically based on screensize. I understand how to resize the canvas based on screensize, but I want to resize the contents as well. Basically I want the game to look the same on every device. he problem I am having currently is that when people with a 4k screen play the game, they can easily see the whole map. And when someone has a really small screen, they can barely see anything. Is there an easy and efficient way to do it? I have tried to do the following:</p>
  
  <pre><code>var maxWidth = 1920;
  var maxHeight = 1080;
  
  ...
  
  function resize() {
      c.width = screenWidth = window.innerWidth;
      c.height = screenHeight = window.innerHeight;
      widthToHeight = screenWidth / screenHeight; // ASPECT RATIO
  
      var scalerAmnt = (maxWidth + maxHeight )
              / (screenWidth + screenHeight);
      context.scale(scalerAmnt, scalerAmnt); 
  }
  </code></pre>
  
  <p>If I scale the canvas like this, it has undesired results. It goes off center, and is far too large. As you can see I have set a max width and height. Basically I am trying to make the game look the same on every device as it does on a machine with that resolution. </p>
  
  <p>LIVE DEMO: www.vertix.io </p>
  
  <p>UPDATE:
  Here is an Image of what it currently looks like:
  <a href="https://i.stack.imgur.com/GFjW2.png" rel="noreferrer"><img src="https://i.stack.imgur.com/GFjW2.png" alt="enter image description here"></a></p>