mousedown event is not continous and runs for a single time only

I am trying to draw a wall-like structure. Let me explain: when mousedown event occurs that cell will become a wall (I'll add some color say black) and unless the mouseup event occurs all the cells through where the cursor will pass will also become a wall. Currently, I am only able to make one wall by mousedown event. Any suggestions or advice would be highly appreciated.

var gridCols = 60;
var gridRows = Math.floor(screen.height / 25) - 2;
gridContainer.style.left = (screen.width-25*gridCols)/screen.width * 50+"%";
var found = false;
const WALLCOLOR = "black", STARTCOLOR = "red", STOPCOLOR="green", VISITEDCOLOR="magenta",
CURRENTCOLOR="yellow"; // Try to implement arrow direction


function sleep(ms) 
{
	return new Promise(resolve => setTimeout(resolve, ms));
}

function getCell(row, col)
{
	return document.querySelector(".row:nth-child("+(row+1)+") .gridsquare:nth-child("+(col+1)+")");
}


function addWall(row, col)
{
	getCell(row, col).style.background = WALLCOLOR;
}


function genDivs(rows, cols)
{ 
	var e = document.getElementById("gridContainer");
	for(var r = 0; r < rows; r++)
	{ 
		var row = document.createElement("div"); 
		row.className = "row";
		for(var c = 0; c < cols; c++)
		{ 
			var cell = document.createElement("div"); 
			if(r == 10 && c == 20)
				cell.style.background = STARTCOLOR;
			else if(r == 10 && c == 40)
				cell.style.background = STOPCOLOR;
		    
		    cell.className = "gridsquare"; 
		    cell.addEventListener("mousedown", addWall.bind(null, r, c));
		    row.appendChild(cell); 
		} 
		e.appendChild(row); 
	}
}


function clearGrid()
{
	for(var i=0; i<20; i++) 
	{
	    for(var j=0; j<60; j++) 
	    {
	    	if(i == 10 && j == 20)
	        	getCell(i, j).style.background = STARTCOLOR;
	        else if(i == 10 && j == 40)
	        	getCell(i, j).style.background = STOPCOLOR;
	        else 
	        	getCell(i, j).style.background = "white";
	        getCell(i, j).classList.remove("animateCell");
	    }

	}
}

genDivs(20, gridCols);
console.log(found);
//dfs(11, 20);

<!DOCTYPE html>
<html>
<head>
	<style>
		#gridContainer
		{
			outline: 1px solid rgb(175, 216, 248);
			font-size: 0;
			position: absolute;
		}
		.row
		{
			
		}
		.gridsquare
		{
			width: 25px;
			height: 25px;
			box-shadow: 0 1px 0 rgb(175, 216, 248) inset, 1px 0px 0px rgb(175, 216, 248) inset;
			display: inline-block;
		}
		.begin
		{
			background-color: purple;
		}
		.end
		{
			background-color: magenta;
		}
		.animateCell
		{
			box-shadow: 0 1px 0 rgb(237, 12, 0) inset, 1px 0px 0px rgb(237, 12, 0) inset;
			background-color: yellow;
			animation-name: stretch;
			animation-duration: 1.5s; 
			animation-timing-function: ease-out; 
			animation-delay: 0;
			animation-fill-mode: none;
		}

		@keyframes stretch 
		{
			0% 
			{
				transform: scale(.0);
				background-color: red;
				border-radius: 100%;
			}
			50% 
			{
				background-color: orange;
			}
			80% 
			{
				transform: scale(1.2);
				background-color: pink;

			}
			100%
			{
				transform: scale(1)
				background-color: pink;
			}
		}
		button
		{
			position: absolute;
		}
	</style>
</head>
<body>
	<div id="gridContainer"></div>
	<!-- <button type = "button" onclick="DFSUtil(10, 20)"> Click </button> -->	
	<!-- <button type = "button" onclick="BFSUtil(10, 20)"> Click </button> -->
	<script type="text/javascript" src="HomeScript.js"></script>
	<script type="text/javascript" src="./Algorithms/DepthFirstSearch.js"></script>
	<script type="text/javascript" src="./Algorithms/BreadthFirstSearch.js"></script>

</body>
</html>

Solution

Maybe this is what you're looking for painting divs grid

let canvas = document.querySelector("#container"),
  isDragging = false;

canvas.onmousedown = function(e) {
  if(e.target.nodeName === "DIV" && !e.target.id) {
    e.target.className = "black";
    isDragging = true;
  }
}

canvas.onmouseup = canvas.onmouseleave = function() {
  isDragging = false;
}

document.body.ondragstart = function(e) {
  e.preventDefault();
}

canvas.onmouseover = function(e) {
  if(isDragging && e.target.nodeName === "DIV" && !e.target.id) {
    e.target.className = "black";
  }
}

* {
  box-sizing: border-box;
}
#container {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
}
#container div {
  border: 1px solid cyan;
  width: 25px;
  height: 25px;
  margin-bottom: 25px;
  border-bottom: none;
}
.black {
  background-color: black;
}

<div id="container">
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div>
</div>