Yandex Workshop JavaScript. How to fix the bug with the movement of the logo?

Question

JavaScript

Good afternoon.

It is necessary to implement the moving Yandex.Practice logo with arrows.
I have already implemented everything needed for the state.
My solution is to cut the logo into 25px squares. When you click one of the arrow buttons, the squares fall in a 25px path in the corresponding direction. Or, if some of the squares get coordinates that are out of bounds corresponding to the pressed arrow button, those squares have coordinates equal to "opposite side minus 25 pixels" (their coordinates are calculated at the top left point). During testing, I get an error when the logo goes beyond one of the borders. The logo does not match the size or content. What can cause it? I guess it's because some of the parameters from the conditions above are not a multiple of 25. But I have no idea how to account for this in my code.

Below is everything I did.
https://jsfiddle.net/3bz1rft8/5/

Conditions for the logo:

• canvas size - 400x400px;
  
• line thickness - 16px;
  
• vertical line length - 150px;
  
• horizontal line length - 100px;
  
• background color - black;
  
• line color - white;
  
• distance along the X axis from the vertical to the horizontal line (the borders closest to each other) - 22px;
  
• distance along the Y axis from the vertical to the horizontal line - 22px;
  
• The logo must be centered.
  

Conditions for animation:

• the logo moves by pressing the arrows on the keyboard: up, down, right, left;
  
• each move shifts the entire logo by 25px;
  
• 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.
  

Answer 1

I rewrote the code a little and the problem was solved:

spoiler

const updateSquares = (axis, step, max) => {
  clearRect();
  
  const minAxis = `min${axis.toUpperCase()}`;
  const maxValue = max - 12;
  
  squares.forEach((square) => {
  	square[minAxis] = (maxValue + square[minAxis] + step) % maxValue;
  });

  updateRect(squares);
}

function moveRect(event) {
    switch (event.keyCode) {
        // left
        case 37:
            updateSquares('x', -25, WIDTH);
            break
        // up
        case 38:
            updateSquares('y', -25, HEIGHT);
            break
        // right
        case 39:
            updateSquares('x', 25, WIDTH);
            break
        // down
        case 40:
            updateSquares('y', 25, HEIGHT);
            break
        default:
            break
    }
}

In short, the problem was most likely trite in real numbers, since zhs does not use integers. As a result, an error accumulated in the calculations and artifacts climbed out.
That is, in your code it would be necessary to round the value each time, but in what I did, this is not necessary, because the remainder of the division is an integer.