Canvas-Room-Mapping

<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

const gridSize = 10;
const cellSize = canvas.width / gridSize;

// Draw grid lines
for (let i = 0; i <= gridSize; i++) {
  ctx.strokeStyle = 'lightgrey';
  ctx.beginPath();
  ctx.moveTo(i * cellSize, 0);
  ctx.lineTo(i * cellSize, canvas.height);
  ctx.moveTo(0, i * cellSize);
  ctx.lineTo(canvas.width, i * cellSize);
  ctx.stroke();
}

// Draw coordinate labels
ctx.font = '10px Arial';
ctx.fillStyle = 'black';
ctx.textAlign = 'center';
ctx.textBaseline = 'top';
ctx.fillText('0', 0, 0);
ctx.fillText('10', canvas.width, 0);
ctx.fillText('10', 0, canvas.height);
ctx.textBaseline = 'bottom';
ctx.fillText('0', 0, canvas.height);
for (let i = 1; i < gridSize; i++) {
  ctx.fillText(`${i}`, i * cellSize, 15);
  ctx.fillText(`${i}`, 15, i * cellSize);
}

// Draw rectangle and label
ctx.strokeStyle = 'black';
ctx.fillStyle = 'lightblue';
ctx.fillRect(2 * cellSize, 2 * cellSize, 3 * cellSize, 3 * cellSize);
ctx.strokeRect(2 * cellSize, 2 * cellSize, 3 * cellSize, 3 * cellSize);
ctx.fillStyle = 'black';
ctx.font = 'bold 14px Arial';
ctx.fillText('Bathroom', 3.5 * cellSize, 2.5 * cellSize + 14);
</script>