javascript - How does negative co-ordinate work in HTML5 canvas? -

function background() {     this.speed = 1; // redefine speed of background panning     // implement abstract function    this.draw = function() {         // pan background         this.y += this.speed;         this.context.drawimage(imagerepository.background, this.x, this.y);          // draw image @ top edge of first image         this.context.drawimage(imagerepository.background, this.x, this.y - this.canvasheight);          // if image scrolled off screen, reset         if (this.y >= this.canvasheight)             this.y = 0;     }; } 

i trying understand above code gives logic of rendering background image in infinite loop(giving illusion of continuous panning).

i not understand following line:

 this.context.drawimage(imagerepository.background, this.x, this.y - this.canvasheight); 

clearly this.y - this.canvasheight never > 0. how negative y co-ordinate interpreted canvas? or put simply, following code do?

ctx.drawimage(img, 0, -10); 

it draws starting @ -10 y position based on origin.

i.e.: assuming default origin of 0,0 (left, top) 10 pixels off y-axis not visible or think of start y @ 10 pixels off screen.

(converting comment answer)