Как сделать так, чтобы формы холста двигались быстрее без рассинхронизации?

Question

Итак, я закодировал эту анимацию холста и хотел бы, чтобы фигура двигалась быстрее, хотя при этом происходит рассинхронизация фигур.

Когда я увеличиваю значения, показанные ниже, чтобы фигуры быстрее работали,они делают это, но в конечном итоге уходят от друг друга и рассинхронизируются.

    if (this.dir[i][j] === 'downright') { //go down and right
      this.boxLines[i][j].y += 1;
      this.boxLines[i][j].x += 1;
    }
    if (this.dir[i][j] === 'downleft') { //go down and left
      this.boxLines[i][j].y += 1;
      this.boxLines[i][j].x -= 1;
    }
    if (this.dir[i][j] === 'upright') { //go up and right
      this.boxLines[i][j].y -= 1;
      this.boxLines[i][j].x += 1;
    }
    if (this.dir[i][j] === 'upleft') { //go up and left
      this.boxLines[i][j].y -= 1;
      this.boxLines[i][j].x -= 1;
    }

Есть ли способ исправить это или я могу пойти другим путем?

Ссылка на jsfiddle: https://jsfiddle.net/frankpettersson/nqmy3fkd/7/