draw in canvas

p5.js

let zoom = 1;
let panX = 0;
let panY = 0;
let tool = "pencil";
let matrix = [];
const canvasWidth = 600;
const canvasHeight = 600;
let cellSize = 50;
let showGrid = true;
let strokeWeigth = 1;
const ROWS = canvasWidth/cellSize;
const COLS = canvasHeight/cellSize;
let backgroundColour;
let strokeColour;
let minZoom = 0.3;
let maxZoom = 3;
let zoomDelta = 0.001;
let panBoundFactor = 0.5;

function hexToRgb(hex) {
  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function (m, r, g, b) {
    return r + r + g + g + b + b;
  });

  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result
    ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16),
      }
    : null;
}

function rgbToHex(r, g, b) {
  return "#" + ((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1);
}

function setup() {
  createCanvas(canvasWidth, canvasHeight);
  backgroundColour = color(255, 204, 0);
  strokeColour = color(150, 150, 150);
  for (let row = 0; row < ROWS; ++row) {
    const cells = [];
    for (let col = 0; col < COLS; ++col) {
      cells.push(backgroundColour);
    }
    matrix.push(cells);
  }
  const pencilButton = createButton("Pencil");
  pencilButton.position(600, 0);
  pencilButton.mousePressed(() => {
    tool = "pencil";
  });

  const eraseButton = createButton("Eraser");
  eraseButton.position(600, 40);
  eraseButton.mousePressed(() => {
    tool = "eraser";
  });

  const panButton = createButton("Pan");
  panButton.position(600, 80);
  panButton.mousePressed(() => {
    tool = "pan";
  });

  const saveButton = createButton("Save png");
  saveButton.position(600, 120);
  saveButton.mousePressed(() => {});

  const showGridButton = createButton("Show grid");
  showGridButton.position(600, 160);
  showGridButton.mousePressed(() => {
    showGrid = !showGrid;
  });

  const clearButton = createButton("Clear");
  clearButton.position(600, 200);
  clearButton.mousePressed(() => {
    for (let row = 0; row < ROWS; ++row) {
      for (let col = 0; col < COLS; ++col) {
        matrix[row][col] = backgroundColour;
      }
    }
  });

  const colourHexInput = createInput("");
  colourHexInput.position(600, 240);
  colourHexInput.input(() => {
    hexToRgb(inp.value());
  });
}
// x time
function draw() {
  background(backgroundColour);
  
  // Apply zoom and translate transformations
  translate(panX, panY);
  scale(zoom);
  translate(0, 0);

  if(showGrid){
    stroke(strokeColour);
    strokeWeight(strokeWeigth);
    for(let col = 0; col <= COLS; ++col)
      line(col * cellSize, 0, col * cellSize, ROWS * cellSize);

    for(let row = 0; row <= ROWS; ++row)
      line(0, row * cellSize, COLS * cellSize, row * cellSize);

  }
  
  // Draw your map or other elements here
  drawMap();
}

function drawMap() {
  for (let row = 0; row < ROWS; ++row) {
    for (let col = 0; col < COLS; ++col) {
      fill("blue");
      textSize(cellSize / 4);
      text(`${row * COLS + col}`, col * cellSize + cellSize / 4, row * cellSize + cellSize / 4);
      if(!showGrid) noStroke();
      if(matrix[row][col] === backgroundColour) continue;
      fill(matrix[row][col]);
      rect(col * cellSize, row * cellSize, cellSize, cellSize);
    }
  }
}

function mouseWheel(event) {
  const newZoom = zoom + event.delta * zoomDelta;
  if(newZoom < minZoom || newZoom > maxZoom) return;
  zoom = newZoom;
}

function mouseDragged() {
  if (tool == "pan") {
    panX += mouseX - pmouseX;
    panY += mouseY - pmouseY;
    panX = constrain(panX, -canvasWidth * panBoundFactor, canvasWidth * panBoundFactor);
    panY = constrain(panY, -canvasHeight * panBoundFactor, canvasHeight * panBoundFactor);
  } else if (tool == "pencil" || tool == "eraser") {
    brush();
  }
}

function mousePressed() {
  brush();
}

function brush() {
  if (tool !== "pencil" && tool !== "eraser") return;

  const realGridSize = cellSize * zoom;

  // Adjusted mouse coordinates based on zoom and pan
  const adjustedMouseX = (mouseX - panX) ;
  const adjustedMouseY = (mouseY - panY);

  const col = Math.floor(adjustedMouseX/ realGridSize);
  const row = Math.floor(adjustedMouseY/ realGridSize);
  
  
  // console.log(mouseX, mouseY,adjustedMouseX,adjustedMouseY, panX, panY, realGridSize, col, row);
  if (row < 0 || col < 0 || row >= ROWS || col >= COLS) return;
  let colour = tool == "pencil" ? color(123, 0, 0) : backgroundColour;
  matrix[row][col] = colour;
}