// ---- change grid size ---- function changeGridSize() const newSize = parseInt(gridSizeSelect.value, 10); if(newSize === currentGridSize) return; // backup old colors? but we can optionally preserve? but resize resets canvas better to keep new fresh matrix. // but user might want to keep old drawing? To be friendly, we can attempt to map old drawing into new grid? // That could be messy (scale). For simplicity and clarity, we reset matrix with default bg, but we show warning? We'll just reinit. currentGridSize = newSize; pixelMatrix = initMatrix(currentGridSize, DEFAULT_BG); resizeAndRedraw();

// fill background (alias for clear with current bg but also set custom) function fillBackground() fillAllWithColor(DEFAULT_BG);

.melon-badge background: #00000055; border-radius: 28px; text-align: center; font-size: 0.7rem; padding: 6px 10px; color: #ffe1aa; margin-top: 12px; font-weight: bold;

footer font-size: 0.7rem; text-align: center; color: #8aaec0; margin-top: 12px;

// ---- fill with current selected color (not only bg) but fill tool ---- function floodFillTool(targetRow, targetCol, newColor) // typical flood fill 4-direction if(pixelMatrix[targetRow][targetCol] === newColor) return; const targetColor = pixelMatrix[targetRow][targetCol]; const stack = [row: targetRow, col: targetCol]; const visited = Array(currentGridSize).fill().map(() => Array(currentGridSize).fill(false)); while(stack.length)

// update single cell in matrix & canvas function setPixel(row, col, color) col >= currentGridSize) return; if(pixelMatrix[row][col] === color) return; pixelMatrix[row][col] = color; ctx.fillStyle = color; ctx.fillRect(col * cellW, row * cellH, cellW, cellH); // redraw grid line overlay (restore lines) ctx.save(); ctx.beginPath(); ctx.strokeStyle = "#2c3e4e"; ctx.lineWidth = 0.5; // only redraw surrounding lines for performance but fine to redraw thin lines over cell: for(let i = 0; i <= currentGridSize; i++) ctx.beginPath(); ctx.moveTo(i * cellW, 0); ctx.lineTo(i * cellW, canvas.height); ctx.stroke(); ctx.moveTo(0, i * cellH); ctx.lineTo(canvas.width, i * cellH); ctx.stroke(); ctx.restore();

<!-- tools --> <div class="tools-panel"> <div class="color-well"> <span class="color-label">🎨 COLOR</span> <input type="color" id="activeColor" value="#FFAA44"> <div id="currentColorPicker" style="background: #FFAA44;"></div> </div> <div class="size-control"> <span>🔲 GRID</span> <select id="gridSizeSelect"> <option value="16">16x16 (classic)</option> <option value="24">24x24 (detailed)</option> <option value="32" selected>32x32 (melon style)</option> <option value="48">48x48 (big art)</option> </select> </div> <button id="clearCanvasBtn" class="btn btn-danger">🗑️ CLEAR ALL</button> <button id="fillCanvasBtn" class="btn">🪣 FILL BG</button> </div>

<!-- canvas grid container --> <div class="canvas-area"> <canvas id="pixelCanvas" width="320" height="320" style="image-rendering: crisp-edges; image-rendering: pixelated; image-rendering: pixelated; width: 320px; height: 320px;"></canvas> </div>

/* Canvas grid area */ .canvas-area display: flex; justify-content: center; margin-bottom: 1.8rem; background: #1e222d; padding: 12px; border-radius: 28px; box-shadow: inset 0 0 0 2px #0f1119, 0 8px 18px black;

// default background color (deep slate, melon playground style) const DEFAULT_BG = "#1e293b";