7
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 >= this.canvasHeight)
            this.y = 0;
    };
}

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).

I could not understand the following line:

 this.context.drawImage(imageRepository.background, this.x, this.y - this.canvasHeight);

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?

ctx.drawImage(img, 0, -10);
Bhavish Agarwal
  • 663
  • 7
  • 13
  • 2
    It draws starting at -10 for the y position based on the origin. i.e.: Assuming the default origin of 0,0 (left, top) 10 pixels off the y-axis will not be visible or you could think of it as start y at 10 pixels off screen. – dc5 Jul 23 '13 at 19:07
  • @dc5 +1 quite correct. Also if the offset is so large that none of the image would be drawn on-screen, there is evidence that some browsers would not bother rendering the image at all to gain performance. – markE Jul 23 '13 at 19:09
  • 1
    Be careful with drawImage and negative indexes. I've already covered it in depth here: http://stackoverflow.com/questions/15328764/html2canvas-error-uncaught-error-indexsizeerror-dom-exception-1/15329736#15329736 – Saturnix Jul 23 '13 at 19:22

1 Answers1

9

It draws starting at -10 for the y position based on the origin.

i.e.: Assuming the default origin of 0,0 (left, top) 10 pixels off the y-axis will not be visible or you could think of it as start y at 10 pixels off screen.

(Converting comment to answer)

dc5
  • 12,341
  • 2
  • 35
  • 47