# Canvas Infinite Map: How to have reappearing objects at static X,Y even when looping

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.

• 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 Jan 15 '19 at 20:47

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.

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