Make a bitmap wrap around the canvas for infinite scrolling

Question

I am looking for a way to wrap a bitmap image around the canvas, for an infinite scrolling effect. I\'m looking at EaselJS but clean javascript code will also suffice.

Answer 1

Start with a good landscape image.

Flip the image horizontally using context.scale(-1,1).

Combine the flipped image to the right side of the original image.

Because we have exactly mirrored the images, the far left and right sides of the combined image are exactly the same.

Therefore, as we pan across the combined image and “run out of image”, we can just add another copy of the combined image to the right side and we have infinite + seamless panning.

Here's code and a Fiddle: http://jsfiddle.net/m1erickson/ywDp5/