title: Drawing static background on HTML 5 Canvas
body: <p>Just edited my question to make it clearer and more obvious.</p>
  
  <p>I am building a background for my game and I want my background to stay at the same relative position of the objects I draw on top the background except the player object, like a FPS game except that my game is 2D. I am pretty sure this has been done a thousand times but I don't know where to find the solution.</p>
  
  <p>My game is designed to always focus my character at the center of the screen, and draw other objects on the other parts of the background.</p>
  
  <p>Suppose my background is as big as the size of 9 frames as described below, one frame is the exact size of my browser screen.</p>
  
  <p><a href="https://i.stack.imgur.com/QHsMZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QHsMZ.png" alt="enter image description here"></a></p>
  
  <p>Now if my character goes from frame 1 to frame 9, my character will always stay at the center, which is at about (frame.width / 2, frame.height / 2) because my character will have some kind of shape. So the screen will display frame '9' instead of frame '1' now. During the moving process, I will be able to see other objects 'moving away' from my character.</p>
  
  <p>I use a Map class to draw my background, its <code>render()</code> method is like this:</p>
  
  <pre><code>var drawBackground = function (callback) {      
    callback(this);
  }
  
  image.onload = drawBackground(() =&gt; {
    var pattern = this.ctx.createPattern(image, 'repeat');
    this.ctx.fillStyle = pattern;
    this.ctx.fillRect(0, 0, this.paintWidth, this.paintHeight);
    // this.ctx.drawImage(image, 0, 0, 10000, 10000);
  
  });
  image.src = require('../media/bg.jpg');
  </code></pre>
  
  <p>Now there is a problem in my code. Because my background(map) drawing always redraw the screen around my character, the effect I am seeing is like the background moving together with my character, whereas everything else stay at the same location. This doesn't look natural. I want the background and all the other objects stay at the same location. They don't move with my character. How can I do this?</p>
  
  <p>I use an animate() function to show the animation.</p>
  
  <pre><code>function animate() {
  
    map.clear(); // clearRect
  
    ... Some code to track my character...
  
    map.render();
  
    character.render();
  
    requestAnimationFrame(animate);
  }
  
  animiate();
  </code></pre>
  
  <p>EDIT:</p>
  
  <p>some people suggest I use two canvases. I am actually using two canvases.</p>
  
  <p>this is my setup in <code>index.html</code> file:</p>
  
  <pre><code>&lt;canvas id="background" style="z-index: 1;"&gt;You are viewing the Game Background Canvas -- Update your browser!&lt;/canvas&gt;
  &lt;canvas id="canvas" style="z-index: 2;"&gt;...&lt;/canvas&gt;
  </code></pre>
  
  <p>they have css styles as follow:</p>
  
  <pre><code>#canvas, #background {position: absolute;left: 0px; top: 0px;}
  </code></pre>
  
  <p>And my background uses 'background' canvas, my character uses 'canvas', but my other objects also use 'background' canvas and they didn't move with my character, only the background moves with my character, which is strange.</p>