[DragonFly]

Товарищи! Имеем следующую часть кода, задача которой во время движения мыши считывать ее координаты по X, Y и записывать эти координаты в массивы mgx=[] и mgy=[] так, чтобы пара координат была записана туда лишь единожды, без повторения, по одному разу. Как только массив достигает значения в 16 символов, будет выполнена команда отпускания мыши.

Попробовал реализовать данную задачу работой массива внутри функции canvas.onmousedown = function(event) {...}, а именно так, что при нажатии onmouseclick мы получаем на вход первую пару координат, далее при движении onmousemove по плану идет сверка новой пары коодинат с координатами в массиве, таким образом достигается отсутствие повторений, но массив не хочет работать внутри функций onmouse. Кто шарит, подскажите что изменить в коде чтобы заработало или мб попробовать другую логику?

const canvas = document.getElementById("TFG");
const ctx = canvas.getContext("2d");

var mgx = [];
var mgy = [];


canvas.onmousedown = function(event) {

  var x = event.offsetX;
  var y = event.offsetY;
  x = Math.floor(x/30); //работаем с боксами 30x30 пикселей по X
  y = Math.floor(y/30); //и по Y соответственно
  mgx.push(x);
  mgy.push(y);
  console.log(mgx);
  console.log(mgy);
  canvas.onmousemove = function(event) {

    var x = event.offsetX;
    var y = event.offsetY;
    x = Math.floor(x/30);
    y = Math.floor(y/30);
    for (var i=0; i < mgy.lenght; i++) {
      if (x == mgx[i] && y == mgy[i]) {
        break;
      }
      if (i == (mgy.length - 1)) {
        mgx.push(x);
        mgy.push(y);
      }
    }
    canvas.onmouseup = function() {
      canvas.onmousemove = null;
    }

  }
}