[Nexus]

Как только массив достигает значения в 16 символов, будет выполнена команда отпускания мыши.

Это как это? Вы разрабатываете устройство, которое по рукам пользователю бить будет?

Попробуйте так:

const BOX_SIDE_SIZE = 30;
const MAX_DISTANCE = 16;

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

const getKeyByCoordinates = ({x, y}) => `${x}*${y}`;
const getCoordinatesByEvent = e => ({
    x: Math.floor(e.offsetX / BOX_SIDE_SIZE),
    y: Math.floor(e.offsetY / BOX_SIDE_SIZE),
});

let coordinates = {}, 
    coordsLength = 0, 
    mouseStillPressed = false;

canvas.addEventListener('mousedown', e => {
    const eventCoordinates = getCoordinatesByEvent(e);
    
    coordinates = {
        [getKeyByCoordinates(eventCoordinates)]: eventCoordinates
    };
    coordsLength = 1;
    mouseStillPressed = true;
});

canvas.addEventListener('mousemove', e => {
    if (!mouseStillPressed || coordsLength >= MAX_DISTANCE) {
        return;
    }
    
    const eventCoordinates = getCoordinatesByEvent(e);
    const key = getKeyByCoordinates(eventCoordinates);
    
    if (!coordinates[key]) {
        coordinates[key] = eventCoordinates;
        ++coordsLength;
    }
});

canvas.addEventListener('mousemove', e => {
    mouseStillPressed = false;
});