I made a html canvas example of an infinite scrolling map with objects in static places. As you can see in the Fiddle below, when you move left with the Arrow Keys, you can see that the map does not show the other ends tiles and the objects do not appear either.

After the position is changed to the opposite edge of the map, the tiles appear and the object from that side of the map appears.

I made this Fiddle by modifying another Fiddle but it gets my point across. https://jsfiddle.net/n8d5kbau/

Is there any way to duplicate the one edge of the map or am I approaching this the right way? I have been searching for this all over the place, finally deciding to ask here.

Thanks in advance.

  • \$\begingroup\$ Welcome. Wording of the question is weird so it's hard to know what you want. The topic on procedural generation of large maps is very extensive. Usually, this is no place to asking for code or code fixes, but that code looks like a didactic barebones prototype. Is this what you have in mind? jsfiddle.net/2bg0cs1u \$\endgroup\$ Jan 15, 2019 at 20:47

1 Answer 1


To ensure you don't see popping in a wraparound map, one of the following needs to be true (assuming your viewport and all objects are smaller than the world's wrapping interval):

  1. Wrapping Interval - Object Size > Viewport Size

    This way, the object disappears off one side of the screen completely before being re-positioned to the far side, and the pop is completely invisible.

    This seems to already work for your white square. Chopping your checkerboard up into quadrants might be enough to satisfy this constraint.

  2. You draw up to 4 copies of the object at a time, at the corners of a square of size Wrapping Interval

    This way, as one copy begins to slide off the left side of the view, a new copy starts to slide in from the right, and appears to exist continuously rather than popping in only once the left-hand copy disappears completely.

    You can recycle these same 4 copies, leapfrogging the left copy over to become the new right copy as the view continues sliding rightward.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .