How to make canvas loop?

Question

JavaScript

You need to complete the following point:
the movement of the logo should be cyclic - if the logo goes beyond the canvas, then the disappeared part should appear on the opposite side.


how to do it?
Logo and movement code
Video as it should be

Answer 1

Draw a logo inside the pattern and set the transformation for the pattern for animation.

https://developer.mozilla.org/en-US/docs/Web/API/C...

Answer 2

How exactly is the logo drawn?
You can stupidly do this:

1. bring the coordinates of the logo to the form where the upper left corner of the logo is in the canvas area - by adding or subtracting the size of the canvas;
   
2. draw the logo four times: in the right place, to the left by the size of the canvas, above by the size of the canvas, and to the left-below by the size of the canvas (the size of the canvas is taken at the corresponding coordinate).
   

Did I explain clearly?
PS: You can check the need to draw additional copies of the logo.

Answer 3

here I see 2 options
1) you track when the coordinates go beyond the visible field, you have it 0 and 400, and redraw on several objects, since you no longer have 3 sticks, but 2 on one side and 1-2 on the other
2) but it's easier to multiply your shape in X and Y at a distance of 400 pixels from the edges. then when moving beyond the borders on the other side, another, exactly the same figure will appear, which will give the desired effect.