Pixel Art Maker For Melon Playground Site
// get mouse / touch coordinates to grid cell function getGridCoordFromEvent(e) const rect = canvas.getBoundingClientRect(); const scaleX = canvas.width / rect.width; // canvas physical vs CSS const scaleY = canvas.height / rect.height; let clientX, clientY; if(e.touches) // touch event clientX = e.touches[0].clientX; clientY = e.touches[0].clientY; else clientX = e.clientX; clientY = e.clientY; let canvasX = (clientX - rect.left) * scaleX; let canvasY = (clientY - rect.top) * scaleY; canvasX = Math.min(Math.max(0, canvasX), canvas.width - 0.01); canvasY = Math.min(Math.max(0, canvasY), canvas.height - 0.01); const col = Math.floor(canvasX / cellW); const row = Math.floor(canvasY / cellH); return row, col ;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>Pixel Art Maker for Melon Playground</title> <style> * box-sizing: border-box; user-select: none; /* avoid accidental text selection while drawing */
.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; pixel art maker for melon playground
<!-- 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>
function handlePointerEnd(e) isDrawing = false; // reset erase mode to default (based on next click, no persistent) eraseMode = false; // get mouse / touch coordinates to grid
/* export area */ .export-area display: flex; justify-content: center; gap: 12px; margin-top: 0.5rem; flex-wrap: wrap;
<script> (function() // ---------- DOM elements ---------- const canvas = document.getElementById('pixelCanvas'); const ctx = canvas.getContext('2d'); const gridSizeSelect = document.getElementById('gridSizeSelect'); const clearBtn = document.getElementById('clearCanvasBtn'); const fillBgBtn = document.getElementById('fillCanvasBtn'); const exportPngBtn = document.getElementById('exportPNG'); const exportJsonBtn = document.getElementById('exportSpriteData'); const colorPicker = document.getElementById('activeColor'); const colorPreview = document.getElementById('currentColorPicker'); For simplicity, we add "Fill BG" and also
footer font-size: 0.7rem; text-align: center; color: #8aaec0; margin-top: 12px;
// fill bucket triggered by shift+click? but we add extra button: fill with active color. // Let's implement fill using double click OR special button? For simplicity, we add "Fill BG" and also "Flood Fill on double click canvas" function handleCanvasDoubleClick(e) e.preventDefault(); const row, col = getGridCoordFromEvent(e); if(row>=0 && row<currentGridSize && col>=0 && col<currentGridSize) floodFillTool(row, col, colorPicker.value);
#currentColorPicker width: 48px; height: 48px; border: 3px solid white; border-radius: 50%; cursor: pointer; background: #ff44aa; box-shadow: 0 2px 8px black; transition: transform 0.1s ease; #currentColorPicker:active transform: scale(0.95);