Question

bgY += ( enemySpeed + heroSpeed ) / 2;
ctx.drawImage( bg, bgX, bgY - gameHeight );
ctx.drawImage( bg, bgX, bgY );
if( bgY > gameHeight )
{
    bgY = 0;
}

I’m using the code above to draw a background on my canvas.

It works well, except for a small lag whenever the new image is drawn. Just before it’s drawn, the player can see how the background does not have an image for a second at the top. ( That’s not my main problem, but you can help with that too )

Anyways, now for the main problem:

I’m not sure, but I think that when images are moved below the canvas, they’re not actually removed.. Isn’t that going to slow the game down / give bad performance after a while?

Is there any way to prevent this?

Answer 1

Regarding your first question: the if-statement should be right before the calls to drawImage but not after. You may also replace it by a modulo operation which should be save for all relevant cases.

bgY += ( enemySpeed + heroSpeed ) / 2;
bgY %= gameHeight;
ctx.drawImage( bg, bgX, bgY - gameHeight );
ctx.drawImage( bg, bgX, bgY );