How to make an infinite canvas effect?

Question

Algorithms

I found a way, the canvas is increased in the scroll event handler by the amount of the scroll. Is there any other better option?

Answer 1

Take a canvas larger than the screen, up to twice the width and height.
When scrolling, you move the canvas. As soon as you get close to the border, add a new canvas of the same size on the other side. Move both canvases around until the first one is out of sight and you can safely remove it.
With this approach, two canvases are enough if you have one-axis movement, and four if you have two-axis movement.

Answer 2

You can imagine that Google Maps has an infinite canvas. But it's not a giant picture, it's a bunch of little pictures. Just then you need to finish the necessary pieces after the scroll.

1. We make a two-dimensional array of pictures (or a list of lists of pictures so that the number can be easily changed). The size of the pictures can be any, both larger than the size of the canvas, and smaller. For example, the size of one picture is 100x100
   
2. We place the pictures on the canvas. For example, the canvas size is 500x500, then we place 25 pictures from the array. It is possible to add one more picture along the edges, that is, make the canvas size 600x600 (or even 700x700), but only show the center
   
3. Disable the standard scrollbars of the canvas, and do the scrolling yourself - by dragging the mouse (you can - right-click, or adjust and scroll the mouse). Because the scrollbar shows where the viewport is now in the general document, and in an infinite canvas it does not make sense
   
4. When scrolling the canvas, check if you have reached the part where there is no picture, then remove the far row or column and draw a new row or column from the array.
   
5. When drawing pictures from the array, change the scroll of the canvas - return the canvas to the center, just the right pictures will be there after deleting a number of pictures