title: Coordinates of a scaled canvas element
body: <p>I already made use of a search engine, but I did not get the information I wanted, so I want to ask whether someone has a good method/trick for using a self-made coordinate system in a HTML5 canvas element.</p>
  
  <p>I want to develop a 2D game in HTML5 using the canvas element, which should adapt to the whole browser window, like so:</p>
  
  <pre><code>&lt;canvas style="width: 100%; height: 100%;"&gt;
       No support for your browser, unfortunately...
  &lt;/canvas&gt;
  </code></pre>
  
  <p>The problem is that I do not know how I should manage the coordinates of my game.
  In my game the player e.g. moves 32px to the right immediately when the user presses the right arrow key, but what happens, if I resize the canvas element?
  Logically the "blocks" of the game will change their size too, so the unit of the coordinates will not be pixels anymore.</p>
  
  <p>Are there other units I could use or what would you suggest me to do?</p>