I am trying to create a selection system for a tilemap image. The image is added and whenever a user selects a tile and moves the mouse to select multiple tiles the selection container increases in size with increments of the tilesize.

Somehow this is creating a flickering effect when holding down the mouse button and moving it arround. What causes this issue?

var tilesetImageContainer = document.getElementById("tileMapContainer");
var tileSize = 32;
let startSelection = [];
var selectionWidth = 32;
var selectionHeight = 32;
let endSelection = [];

function getCoordinates(e) {
  const { x, y } = e.target.getBoundingClientRect();
  const mouseX = e.clientX - x;
  const mouseY = e.clientY - y;
  return [Math.floor(mouseX / tileSize), Math.floor(mouseY / tileSize)];
}

const mouseDownHandler = function (e) {

if (e.which === 1) {
  e.preventDefault();
  selectedTileMapPositions = [];
  tileMapSelector.style.width = tileSize + "px";
  tileMapSelector.style.height = tileSize + "px";
  tilesetImageContainer.style.cursor = 'crosshair';
  tilesetImageContainer.style.userSelect = 'none';

  startSelection = getCoordinates(e);
  tileMapSelector.style.left = startSelection[0] * tileSize + "px";
  tileMapSelector.style.top = startSelection[1] * tileSize + "px";

  tilesetImageContainer.addEventListener('mousemove', mouseMoveSelectionHandler);
  tilesetImageContainer.addEventListener('mouseup', mouseUpSelectionHandler);
}

};

const mouseMoveSelectionHandler = function (e) {

currentPositionCoordinates = getCoordinates(e);
endSelection = getCoordinates(e);

if (currentPositionCoordinates[0] > startSelection[0] || currentPositionCoordinates[1] < startSelection[1]) {
  // selected more then 1 tile

  selectionWidth = ((currentPositionCoordinates[0] - startSelection[0]) * tileSize);
  selectionHeight = ((currentPositionCoordinates[1] - startSelection[1]) * tileSize);
}


tileMapSelector.style.width = selectionWidth + tileSize + "px";
tileMapSelector.style.height = selectionHeight + tileSize + "px";

console.log("start: " + startSelection);
console.log("current: " + currentPositionCoordinates);
};

const mouseUpSelectionHandler = function (e) {

for (var x = startSelection[0]; x <= endSelection[0]; x++) {
  for (var y = startSelection[1]; y <= endSelection[1]; y++) {
    selectedTileMapPositions.push([x,y]);
  }
}


console.log(selectedTileMapPositions);

tilesetImageContainer.removeEventListener('mousemove', mouseMoveSelectionHandler);
tilesetImageContainer.removeEventListener('mouseup', mouseUpSelectionHandler);

tilesetImageContainer.style.cursor = 'default';
tilesetImageContainer.style.removeProperty('user-select');

startSelection = [];
endSelection = [];
};

tilesetImageContainer.addEventListener('mousedown', mouseDownHandler);

Here is a JsFiddle: https://jsfiddle.net/6kv3pj1n/19/