Vohob Ahmad

const rectPos = { x: 0, y: 0 };
const currPos = { x: 0, y: 0 };
const start= { x: 0, y: 0 };

const handleMouseDown = (e) => {
  start.x = e.offsetX
  start.y = e.offsetY
  canvas.addEventListener('mousemove', handleMouseMove)
  canvas.addEventListener('mouseup', handleMouseUp)
}

const handleMouseMove = (e) => {
  currPos.x = getXPixelRatio * Math.round((rectPos.x + e.offsetX - start.x) / getXPixelRatio);
  currPos.y = getYPixelRatio * Math.round((rectPos.y + e.offsetY - start.y) / getYPixelRatio);
  currPos.x = edge(currPos.x, 0, w - 25);
  currPos.y = edge(currPos.y, 0, h - 25);
  renderAll()
  drawRect(currPos.x, currPos.y);
}

const handleMouseUp = (e) => {
  rectPos.x = currPos.x;
  rectPos.y = currPos.y;
  canvas.removeEventListener('mousemove', handleMouseMove)
  canvas.removeEventListener('mouseup', handleMouseUp)
}

const renderAll = () => {
    ctx.clearRect(0, 0, w, h)
    canvas.addEventListener('mousedown', handleMouseDown)
    renderGrid()
}