I have create a similar JS script that ,I am using in https://freemazegenerator.org/, Can you suggesr me a way by which I can create custom maze sape. <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Square Maze Generator</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    font-family: system-ui, sans-serif;
    background: #1a1a2e;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    flex-direction: column;
    gap: 1rem;
  }
  canvas { border-radius: 8px; box-shadow: 0 0 30px rgba(0,0,0,.5); }
  .controls { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; justify-content: center; }
  label { color: #e0e0e0; font-size: .9rem; }
  input[type="range"] { width: 120px; }
  span { color: #e0e0e0; font-size: .85rem; min-width: 24px; text-align: center; }
  button {
    background: #e94560; color: #fff; border: none; padding: .5rem 1.2rem;
    border-radius: 6px; cursor: pointer; font-size: .9rem; font-weight: 600;
    transition: background .2s;
  }
  button:hover { background: #c73650; }
  .check { display: flex; align-items: center; gap: .4rem; }
  .check input { width: 16px; height: 16px; cursor: pointer; }
</style>
</head>
<body>

<canvas id="maze"></canvas>

<div class="controls">
  <label>Size <input type="range" id="size" min="5" max="50" value="15" /><span id="sizeVal">15</span></label>
  <label>Cell <input type="range" id="cell" min="8" max="40" value="24" /><span id="cellVal">24</span></label>
  <div class="check"><input type="checkbox" id="solve" /><label>Solution</label></div>
  <button id="generate">Generate</button>
</div>

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

const sizeInput = document.getElementById('size');
const cellInput = document.getElementById('cell');
const sizeVal = document.getElementById('sizeVal');
const cellVal = document.getElementById('cellVal');
const solveCheck = document.getElementById('solve');
const genBtn = document.getElementById('generate');

let grid = [], solution = [];

class Cell {
  constructor(r, c) {
    this.r = r; this.c = c;
    this.walls = { top: true, right: true, bottom: true, left: true };
    this.visited = false;
  }
}

function buildGrid(rows, cols) {
  grid = Array.from({ length: rows }, (_, r) =>
    Array.from({ length: cols }, (_, c) => new Cell(r, c))
  );
}

function getNeighbors(cell, rows, cols) {
  const { r, c } = cell;
  const nbs = [];
  if (r > 0) nbs.push(grid[r - 1][c]);
  if (r < rows - 1) nbs.push(grid[r + 1][c]);
  if (c > 0) nbs.push(grid[r][c - 1]);
  if (c < cols - 1) nbs.push(grid[r][c + 1]);
  return nbs.filter(n => !n.visited);
}

function removeWall(a, b) {
  const dr = a.r - b.r, dc = a.c - b.c;
  if (dr === 1) { a.walls.top = false; b.walls.bottom = false; }
  if (dr === -1) { a.walls.bottom = false; b.walls.top = false; }
  if (dc === 1) { a.walls.left = false; b.walls.right = false; }
  if (dc === -1) { a.walls.right = false; b.walls.left = false; }
}

function generate(rows, cols) {
  buildGrid(rows, cols);
  const stack = [grid[0][0]];
  grid[0][0].visited = true;
  while (stack.length) {
    const cur = stack[stack.length - 1];
    const nbs = getNeighbors(cur, rows, cols);
    if (!nbs.length) { stack.pop(); continue; }
    const next = nbs[Math.floor(Math.random() * nbs.length)];
    next.visited = true;
    removeWall(cur, next);
    stack.push(next);
  }
}

function bfs(rows, cols) {
  const start = grid[0][0], end = grid[rows - 1][cols - 1];
  const queue = [[start]];
  const visited = new Set();
  visited.add(`${start.r},${start.c}`);
  while (queue.length) {
    const path = queue.shift();
    const cur = path[path.length - 1];
    if (cur === end) return path;
    for (const [dr, dc, wall, opp] of [[-1,0,'top','bottom'],[1,0,'bottom','top'],[0,-1,'left','right'],[0,1,'right','left']]) {
      const nr = cur.r + dr, nc = cur.c + dc;
      if (nr < 0 || nr >= rows || nc < 0 || nc >= cols) continue;
      if (cur.walls[wall]) continue;
      const key = `${nr},${nc}`;
      if (visited.has(key)) continue;
      visited.add(key);
      queue.push([...path, grid[nr][nc]]);
    }
  }
  return [];
}

function draw(rows, cols, cellSize) {
  const w = cols * cellSize + 1, h = rows * cellSize + 1;
  canvas.width = w; canvas.height = h;
  ctx.clearRect(0, 0, w, h);
  ctx.strokeStyle = '#e0e0e0';
  ctx.lineWidth = 2;

  for (let r = 0; r < rows; r++) {
    for (let c = 0; c < cols; c++) {
      const x = c * cellSize, y = r * cellSize;
      const cell = grid[r][c];
      if (cell.walls.top)    { ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + cellSize, y); ctx.stroke(); }
      if (cell.walls.right)  { ctx.beginPath(); ctx.moveTo(x + cellSize, y); ctx.lineTo(x + cellSize, y + cellSize); ctx.stroke(); }
      if (cell.walls.bottom) { ctx.beginPath(); ctx.moveTo(x, y + cellSize); ctx.lineTo(x + cellSize, y + cellSize); ctx.stroke(); }
      if (cell.walls.left)   { ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x, y + cellSize); ctx.stroke(); }
    }
  }

  // start & end
  ctx.fillStyle = '#4ade80';
  ctx.fillRect(1, 1, cellSize - 2, 4);
  ctx.fillStyle = '#ef4444';
  ctx.fillRect(1, h - cellSize + 1, cellSize - 2, 4);

  if (solveCheck.checked && solution.length) {
    ctx.strokeStyle = '#facc15';
    ctx.lineWidth = 3;
    ctx.beginPath();
    for (let i = 0; i < solution.length; i++) {
      const x = solution[i].c * cellSize + cellSize / 2;
      const y = solution[i].r * cellSize + cellSize / 2;
      i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
    }
    ctx.stroke();
  }
}

function render() {
  const rows = +sizeInput.value, cols = rows;
  const cellSize = +cellInput.value;
  generate(rows, cols);
  solution = bfs(rows, cols);
  draw(rows, cols, cellSize);
}

sizeInput.addEventListener('input', () => { sizeVal.textContent = sizeInput.value; render(); });
cellInput.addEventListener('input', () => { cellVal.textContent = cellInput.value; render(); });
solveCheck.addEventListener('change', () => render());
genBtn.addEventListener('click', render);

render();
</script>
</body>
</html>