title: How to center a canvas on top of a background image
body: <p>I have an image that I want to use as a document background, and place on top of it a canvas element.</p>
  
  <p>The reason is that the background is large (2048x1024) and if I place it inside the canvas it will be redrawn on every frame wasting resources.</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;image class = "img1" src = "./assets/game.jpg" id= "backk"/&gt;
      &lt;canvas id="canvas" width="1366" height="1024"&gt;No Canvas support!&lt;/canvas&gt;    
  &lt;/div&gt;
  
          container {         
          position: relative;
          width:100%;
              margin : auto;
  
          }
      canvas{
          display:block;
          margin: auto;
          position: absolute;
          top: 0;
          left: 0;
          z-index:1;
          }
      img1{
          position: absolute;
          top: 0;
          left: 0;
          z-index:0;          
      }
  </code></pre>
  
  <p>Using the above markup, what should my CSS be in order to get the result seen also in the following picture:</p>
  
  <p><img src="https://i.stack.imgur.com/eCtAN.png" alt="enter image description here"></p>