JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/mikechambers/ExamplesByMesh/raw/master/JavaScript/QuadTree/src/QuadTree.js"></script>
<canvas id="canvas" height="300" width="300"></canvas>
<textarea id="output" cols="50" rows="10"></textarea>

JavaScript

var canvas = document.getElementById("canvas"),
	ctx = canvas.getContext("2d");

var boundaries = {
	x: 0,
	y: 0,
	width: canvas.width,
	height: canvas.height
}

// True to create QuadTree with just points
var tree = new QuadTree(boundaries, true);


// Inserts object with passed boundaries into quad tree.
// Also draws on canvas its boundaries.
function addRect(boundaries) {
	ctx.strokeRect(boundaries.x, boundaries.y, 1, 1);
	tree.insert({
		x: boundaries.x,
		y: boundaries.y
	});
};


function retrieve(boundaries) {
	ctx.strokeStyle = "red";
	ctx.strokeRect(boundaries.x, boundaries.y, 1, 1);
	
	return tree.retrieve({
		x: boundaries.x,
		y: boundaries.y
	});
};

// Create vertal line across middle
ctx.beginPath();
ctx.lineTo(canvas.width / 2, 0);
ctx.lineTo(canvas.width / 2, canvas.height);
ctx.stroke();

// Create horizontal line across middle
ctx.beginPath();
ctx.lineTo(0, canvas.height / 2);
ctx.lineTo(canvas.width, canvas.height / 2);
ctx.stroke();

// Add 5 points
addRect({ x:0, y:0});
addRect({ x:50, y:50 });
addRect({ x:150, y:150 }); // Point directly in middle of line intersection
addRect({ x:200, y:200 });
addRect({ x:250, y:250 });



/* Uncomment and run to see results of each query */

// In quadrant I - Returns 0 points
//var items = retrieve({ x: 175, y: 75 }); 


// In quadrant II - Returns 3 points
// Only this retrieve point returns middle-point(150, 150).  Why is this?
//var items = retrieve({ x: 75, y: 75 }); 


 // In quadrant III - Returns 0 points
//var items = retrieve({ x: 75, y: 175 });


// In quadrant IV - Returns 2 points	
var items = retrieve({ x: 175, y: 175 }); 

document.getElementById("output").value = "Retrieval count: " + items.length + "\n";
document.getElementById("output").value += JSON.stringify(items);