Обнаружение неправильной формы

Не могу помочь с вопросом 1.

Вы обязательно должны построить дерево как можно раньше, учитывая, что цель состоит в том, чтобы страница реагировала как можно быстрее, как только пользователь щелкнет где-нибудь.

Сохраняйте дерево до тех пор, пока пользователь взаимодействует с двумерной областью. Обновление дерева квадрантов не должно быть слишком сложным, поэтому, даже если область изменит содержимое, вы сможете повторно использовать существующее дерево (просто обновите его).

Учитывая тот факт, что ваша область рисования хорошо известна, я не вижу преимуществ в QuadTree по сравнению с пространственной хэш-функцией. Эта функция даст вам целое число из точки (x, y).

var blocWidth   = 20;
var blocHeight  = 20;
var blocsPerLine = ( 0 | ( worldWidth / blocWidth) ) + 1 ; 
function hashPoint(x,y) {
   return ( 0 | (x/blocWidth)) + blocsPerLine*(0|(y/blocHeight));
}

как только вы это сделаете, хешируйте все свои посылки в массиве:

parcelHash = [];

function addHash(i,p) {
   if (!parcelHash[i]) { parcelHash[i]=[ p ]; return; }
   if (parcelHash[i].indexOf(p) != -1 ) return;
   parcelHash[i].push(p);
}

function hashParcel (p) {
     var thisHash = hashPoint(p.x,p.y); // upper left
     addHash( thisHash, p);
     thisHash = hashPoint(p.x+width, p.y); // upper right
     addHash(thisHash, p);
     thisHash = hashPoint(p.x, p.y+p.height); // lower left
     addHash(thisHash, p);
     thisHash = hashPoint(p.x+width, p.y+p.height); // lower right
     addHash(thisHash, p);         
};

for (var i=0; i<allParcels.length; i++) { hashParcel(allParcels[i]) };

теперь, если у вас есть положение мыши, вы можете получить все посылки в одном блоке с помощью:

  function getParcels(x,y) {  
       var thisHash = hashPoint(x,y); 
       return parcelHash[thisHash]; 
    }

Я просто дам вам несколько советов в дополнение к тому, что сказали другие.

... по событию при наведении указателя мыши на каком участке я нахожусь...

Из других Ваших сообщений делаю вывод, что посылки будут иметь неправильную форму. Обычно деревья квадрантов работают с прямоугольниками, поэтому вам нужно будет вычислить ограничивающий прямоугольник вокруг формы участка и вставить этот прямоугольник в дерево квадрантов. Затем, когда вы хотите определить, находится ли мышь над участком, вы запросите дерево квадрантов, которое даст вам набор участков, которые могут находиться под мышью, но затем вам придется сделать более точная проверка самостоятельно, чтобы убедиться, что это действительно так.

... когда мышь останавливается.

Из других ваших вопросов я увидел, что вы пытаетесь определить, когда мышь «остановилась». Возможно, вам следует посмотреть на это так: курсор мыши никогда не движется, он телепортируется по экрану от предыдущей точки к следующей. Он всегда остановлен, никогда не двигается. Это может показаться немного философским, но это сделает ваш код проще. Вы определенно сможете достичь того, что задумали, без каких-либо проверок setTimeout.

... нарезка моего холста, скажем, на 15 квадратов по 100 объектов в каждом.
... Должен ли я нарезать его при создании или нарезка должна происходить, когда мышь находится над регион

Вы не будете (и не сможете) выполнять нарезку, реализация quadtree делает это автоматически (это ее цель), когда вы вставляете или удаляете элементы из него (обратите внимание, что перемещение элемента фактически удаляет его, а затем повторно вставляет).

Я не изучал реализацию quadtree, которую вы используете, но вот две реализации MX-CIF quadtree на случай, если одна из них вам не подойдет:

• https://github.com/pdehn/jsQuad
• https://github.com/bjornharrtell/jsts/tree/master/src/jsts/index/quadtree

Проблема в вопросе 1, вероятно, возникает из-за того, что страница jsfiddle (http) пытается получить доступ к quadtree.js, который находится на https