[voraa]

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);
    let exist = false;
    for (var i=0; i < mgy.length; i++) {
      if (x == mgx[i] && y == mgy[i]) {
        exist = true;
        break;
      }
    }
    if (! exist) {
        mgx.push(x);
        mgy.push(y);
    }
    if (mgy.length == 16)  canvas.onmousemove = null;
 }

   
    canvas.onmouseup = function() {
      canvas.onmousemove = null;
      canvas.onmouseup = null;
    }
}

В принципе ваш код тоже может работать, если ошибку исправить
for (var i=0; i < mgy.lenght; i++) {