<canvas id="canvas" width="500" height="600" style="border: 1px solid black;"></canvas>

const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");
const gridSettings = {
    squaresHorizontal: 30,
    squaresVertical: 30,
}
const w = canvas.width
const h = canvas.height
const squareWidth = w / gridSettings.squaresHorizontal
const squareHeight = h / gridSettings.squaresVertical

function renderGrid() {
    ctx.beginPath()
    ctx.strokeStyle = '#bdbdbd'
    ctx.lineWidth = 0.4
    for (let x = squareWidth; x < w; x += squareWidth) ctx.strokeRect(x, 0, 0.1, h)
    for (let y = squareHeight; y < h; y += squareHeight) ctx.strokeRect(0, y, w, 0.1)
    ctx.fill()
    ctx.closePath()
}

const drawRect = (offsetX = 0, offsetY = 0) => {
    ctx.fillStyle = "black";
    ctx.clearRect(0, 0, 500, 600)
    ctx.fillRect(offsetX, offsetY, 34, 40)
    renderGrid()
}

drawRect(0, 0)
const rectPos = { x: 0, y: 0 };
const currPos = { x: 0, y: 0 };
const edge = (c, min, max) => Math.max(min, Math.min(max, c));
canvas.onmousedown = (e) => {
    const start = { x: e.offsetX, y: e.offsetY };

    canvas.onmousemove = (e) => {
        currPos.x = squareWidth * Math.round((rectPos.x + e.offsetX - start.x) / squareWidth);
        currPos.y = squareHeight * Math.round((rectPos.y + e.offsetY - start.y) / squareHeight);
        currPos.x = edge(currPos.x, 0, 500 - 34);
        currPos.y = edge(currPos.y, 0, 600 - 40);

        drawRect(currPos.x, currPos.y);
    }
    canvas.onmouseup = (e) => {
        rectPos.x = currPos.x;
        rectPos.y = currPos.y;
        canvas.onmousemove = null
    }
}