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);
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);
- 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 Commented Jul 23, 2013 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 Commented Jul 23, 2013 at 19:09
- 1 Be careful with drawImage and negative indexes. I've already covered it in depth here: stackoverflow./questions/15328764/… – Saturnix Commented Jul 23, 2013 at 19:22
1 Answer
Reset to default 9It 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 ment to answer)