title: How does negative co-ordinate work in HTML5 canvas?
body: <pre><code>function Background() {
      this.speed = 1; // Redefine speed of the background for panning
  
     // Implement abstract function
     this.draw = function() {
          // Pan background
          this.y += this.speed;
          this.context.drawImage(imageRepository.background, this.x, this.y);
  
          // Draw another image at the top edge of the first image
          this.context.drawImage(imageRepository.background, this.x, this.y - this.canvasHeight);
  
          // If the image scrolled off the screen, reset
          if (this.y &gt;= this.canvasHeight)
              this.y = 0;
      };
  }
  </code></pre>
  
  <p>I was trying to understand the above code which gives the logic of rendering a background image in infinite loop(giving an illusion of continuous panning).</p>
  
  <p>I could not understand the following line:</p>
  
  <pre><code> this.context.drawImage(imageRepository.background, this.x, this.y - this.canvasHeight);
  </code></pre>
  
  <p>Clearly this.y - this.canvasHeight will never be > 0. How is the negative y co-ordinate interpreted by the canvas? Or put simply, what will the following code do?</p>
  
  <pre><code>ctx.drawImage(img, 0, -10);
  </code></pre>