0

I am trying to implement infinite scrolling as in flappy bird game. I decreased x position and drew the background and again drew the clipped image part. But it is not seamless as in other game. I could see the part where the image is joined.Is there any elegant way to do it? Here is the code

window.onload = function()
{
    var xpos=0;
    var ypos=0;


    var canvas = document.getElementById("screen");
    var ctx = canvas.getContext("2d");

    var bg = new Image();
    bg.src="background2.png";
    bg.onload = function(){
        update();
    };


function update()
{   xpos-=5;

    if(xpos==-750)
    {
        xpos = 0;
    }
    ctx.drawImage(bg,xpos,ypos,canvas.width,canvas.height);
    ctx.drawImage(bg,bg.width+xpos,ypos,canvas.width,canvas.height);
    setTimeout(update,30);
}


};
dark knight
  • 85
  • 1
  • 11
  • See http://stackoverflow.com/questions/2795269/does-html5-canvas-support-double-buffering or your problem is the background edges not joining nicely? For that I say "edit the image". And "abccbaabc..." approach hardly have a good result IMO. – Prusse Feb 26 '15 at 14:54
  • 2
    As long as you don’t want to _manipulate_ pieces of that background image, I think it might be a lot better performance-wise, if you used an _actual_ background-image, and simply left the parts of your canvas where you want it to show transparent … set the background to repeat, and then you can simply have it “move” by manipulating the `background-position` property … without having to draw the new full image multiple times onto the canvas in frequent repetition. – CBroe Feb 26 '15 at 16:26
  • 1
    Here's a previous SO post on how to stitch an image plus its horizontal reflection together to create an infinite panorama. You can start here and see how to stitch multiple panning images together: http://stackoverflow.com/questions/20263954/make-a-bitmap-wrap-around-the-canvas-for-infinite-scrolling/20273738#20273738 – markE Feb 27 '15 at 05:26

0 Answers0