madson/draw grid.html

## draw grid.html
<html>
<head>
  <style>
    * { margin: 0px; padding: 0px; }
    #imgGrid { position: absolute; top: 0; left: 0; z-index: 0; opacity: 1; }
    #myCanva { position: absolute; top: 0; left: 0; z-index: 999; opacity: 0.5; }
    img { object-fit: contain; width: 1000px; height: auto; }
  </style>
</head>
<body>

  <div style="position: relative; margin: 50px;">
    <img id="map" alt="">
    <canvas id="imgGrid" width="1000" height="1000"></canvas>
    <canvas id="myCanva" width="1000" height="1000" onmousemove="mouseMove(event)" onmousedown="mouseDown(event)" onmouseup="mouseUp(event)"></canvas>
  </div>

  <script>
    state = { drawing: false }
    ctx = document.getElementById("myCanva").getContext("2d");

    map = new Image();
    map.onload = function() {
      let mapHeight = map.height * 1000 / map.width;
      if (mapHeight > 1000) {
        mapHeight = 1000;
      }

      state.columns = [], state.rows = [];
      state.cellSize = 20
      state.columnsNumber = 1000 / state.cellSize
      state.rowsNumber = mapHeight / state.cellSize

      document.getElementById("map").src = map.src;
      document.getElementById("map").style.height = mapHeight;
      document.getElementById("imgGrid").height = mapHeight;
      document.getElementById("myCanva").height = mapHeight;

      drawGrid(state, state.columnsNumber, state.rowsNumber, state.cellSize)
    }
    map.src = "Map_Ritz Carlton.png";
    // map.src = "slack-imgs.com.png";
    // map.src = "boca-with-chairs.png";

    function mouseMove(event) {
      state.point = point2Cell(event)

      if (state.drawing) {
        ctx.clearRect(0, 0, 1000, 1000)
        drawShape();
      }
    }

    function mouseDown(event) {
      point = point2Cell(event)
      state.drawing = true;
      clearShape();
      state.shape.startColumn = point.column
      state.shape.startRow = point.row
    }

    function mouseUp(event) {
      point = point2Cell(event)
      state.drawing = false;
      state.shape.endColumn = point.column
      state.shape.endRow = point.row
    }

    function point2Cell(event) {
      x = event.offsetX / state.cellSize;
      y = event.offsetY / state.cellSize;
      column = Math.ceil(x + 0.001);
      row = Math.ceil(y + 0.001);
      if (column > state.columnsNumber) { column = state.columnsNumber; }
      if (row > state.rowsNumber) { row = state.rowsNumber; }
      return { column: column, row: row }
    }

    function shapeRect(state) {
      x = 0, y = 0, width = 0, height = 0;

      if (state.point.column > state.shape.startColumn) {
        x = state.columns[state.shape.startColumn]
        width = (state.point.column - state.shape.startColumn + 1) * state.cellSize
      } else {
        x = state.columns[state.point.column]
        width = (state.shape.startColumn - state.point.column + 1) * state.cellSize
      }

      if (state.point.row > state.shape.startRow) {
        y = state.rows[state.shape.startRow]
        height = (state.point.row - state.shape.startRow + 1) * state.cellSize
      } else {
        y = state.rows[state.point.row]
        height = (state.shape.startRow - state.point.row + 1) * state.cellSize
      }

      return {
        x: x,
        y: y,
        width: width,
        height: height,
      }
    }

    function drawShape() {
      if (state.shape) {
        ctx.fillStyle = "blue";
        rect = shapeRect(state)
        ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
      } else {
        ctx.clearRect(0, 0, 1000, 1000)
      }
    }

    function clearShape() {
      state.shape = null;
      drawShape();
      state.shape = {}
    }

    function drawGrid(state, columns, rows, size) {
      gridCtx = document.getElementById("imgGrid").getContext("2d");
      dx = 0, dy = 0;

      for (y = 0; y < rows; y++) {
        for (x = 0; x < columns; x++) {
          gridCtx.lineWidth = 0.25
          gridCtx.strokeRect(dx, dy, size, size);
          dx += size;
        }
        dx = 0;
        dy += size;
      }

      for (i = 0; i < columns; i++) {
        state.columns[i + 1] = i * size;
      }

      for (i = 0; i < rows; i++) {
        state.rows[i + 1] = i * size;
      }
    }
  </script>
</body>
</html>
	<html>
	<head>
	<style>
	* { margin: 0px; padding: 0px; }
	#imgGrid { position: absolute; top: 0; left: 0; z-index: 0; opacity: 1; }
	#myCanva { position: absolute; top: 0; left: 0; z-index: 999; opacity: 0.5; }
	img { object-fit: contain; width: 1000px; height: auto; }
	</style>
	</head>
	<body>

	<div style="position: relative; margin: 50px;">
	<img id="map" alt="">
	<canvas id="imgGrid" width="1000" height="1000"></canvas>
	<canvas id="myCanva" width="1000" height="1000" onmousemove="mouseMove(event)" onmousedown="mouseDown(event)" onmouseup="mouseUp(event)"></canvas>
	</div>

	<script>
	state = { drawing: false }
	ctx = document.getElementById("myCanva").getContext("2d");

	map = new Image();
	map.onload = function() {
	let mapHeight = map.height * 1000 / map.width;
	if (mapHeight > 1000) {
	mapHeight = 1000;
	}

	state.columns = [], state.rows = [];
	state.cellSize = 20
	state.columnsNumber = 1000 / state.cellSize
	state.rowsNumber = mapHeight / state.cellSize

	document.getElementById("map").src = map.src;
	document.getElementById("map").style.height = mapHeight;
	document.getElementById("imgGrid").height = mapHeight;
	document.getElementById("myCanva").height = mapHeight;

	drawGrid(state, state.columnsNumber, state.rowsNumber, state.cellSize)
	}
	map.src = "Map_Ritz Carlton.png";
	// map.src = "slack-imgs.com.png";
	// map.src = "boca-with-chairs.png";

	function mouseMove(event) {
	state.point = point2Cell(event)

	if (state.drawing) {
	ctx.clearRect(0, 0, 1000, 1000)
	drawShape();
	}
	}

	function mouseDown(event) {
	point = point2Cell(event)
	state.drawing = true;
	clearShape();
	state.shape.startColumn = point.column
	state.shape.startRow = point.row
	}

	function mouseUp(event) {
	point = point2Cell(event)
	state.drawing = false;
	state.shape.endColumn = point.column
	state.shape.endRow = point.row
	}

	function point2Cell(event) {
	x = event.offsetX / state.cellSize;
	y = event.offsetY / state.cellSize;
	column = Math.ceil(x + 0.001);
	row = Math.ceil(y + 0.001);
	if (column > state.columnsNumber) { column = state.columnsNumber; }
	if (row > state.rowsNumber) { row = state.rowsNumber; }
	return { column: column, row: row }
	}

	function shapeRect(state) {
	x = 0, y = 0, width = 0, height = 0;

	if (state.point.column > state.shape.startColumn) {
	x = state.columns[state.shape.startColumn]
	width = (state.point.column - state.shape.startColumn + 1) * state.cellSize
	} else {
	x = state.columns[state.point.column]
	width = (state.shape.startColumn - state.point.column + 1) * state.cellSize
	}

	if (state.point.row > state.shape.startRow) {
	y = state.rows[state.shape.startRow]
	height = (state.point.row - state.shape.startRow + 1) * state.cellSize
	} else {
	y = state.rows[state.point.row]
	height = (state.shape.startRow - state.point.row + 1) * state.cellSize
	}

	return {
	x: x,
	y: y,
	width: width,
	height: height,
	}
	}

	function drawShape() {
	if (state.shape) {
	ctx.fillStyle = "blue";
	rect = shapeRect(state)
	ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
	} else {
	ctx.clearRect(0, 0, 1000, 1000)
	}
	}

	function clearShape() {
	state.shape = null;
	drawShape();
	state.shape = {}
	}

	function drawGrid(state, columns, rows, size) {
	gridCtx = document.getElementById("imgGrid").getContext("2d");
	dx = 0, dy = 0;

	for (y = 0; y < rows; y++) {
	for (x = 0; x < columns; x++) {
	gridCtx.lineWidth = 0.25
	gridCtx.strokeRect(dx, dy, size, size);
	dx += size;
	}
	dx = 0;
	dy += size;
	}

	for (i = 0; i < columns; i++) {
	state.columns[i + 1] = i * size;
	}

	for (i = 0; i < rows; i++) {
	state.rows[i + 1] = i * size;
	}
	}
	</script>
	</body>
	</html>