CODE:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pixel Art Generator</title>
<style>
.pixelartgenerator3841-body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.pixelartgenerator3841-container {
display: flex;
flex-direction: column;
align-items: center;
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.pixelartgenerator3841-title {
font-size: 24px;
margin-bottom: 10px;
}
.pixelartgenerator3841-description {
font-size: 14px;
margin-bottom: 20px;
text-align: center;
}
.pixelartgenerator3841-canvas {
border: 1px solid #ccc;
margin-bottom: 20px;
}
.pixelartgenerator3841-controls {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-bottom: 20px;
}
.pixelartgenerator3841-button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
}
.pixelartgenerator3841-color-picker {
width: 50px;
height: 50px;
border: none;
cursor: pointer;
}
.pixelartgenerator3841-instructions {
font-size: 14px;
text-align: left;
margin-bottom: 20px;
}
.pixelartgenerator3841-grid-controls {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.pixelartgenerator3841-input {
width: 50px;
}
.pixelartgenerator3841-color-history {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 20px;
}
.pixelartgenerator3841-color-swatch {
width: 30px;
height: 30px;
border: 1px solid #ccc;
cursor: pointer;
}
@media (max-width: 600px) {
.pixelartgenerator3841-container {
padding: 10px;
}
.pixelartgenerator3841-canvas {
max-width: 90vw;
max-height: 90vw;
}
}
</style>
</head>
<body class="pixelartgenerator3841-body">
<div class="pixelartgenerator3841-container">
<h1 class="pixelartgenerator3841-title">Pixel Art Generator</h1>
<p class="pixelartgenerator3841-description">Create your own pixel art masterpiece!</p>
<div class="pixelartgenerator3841-grid-controls">
<input type="number" id="columnsInput" class="pixelartgenerator3841-input" min="1" max="50" value="30">
<span>x</span>
<input type="number" id="rowsInput" class="pixelartgenerator3841-input" min="1" max="50" value="20">
<button id="createGridBtn" class="pixelartgenerator3841-button">Create Grid</button>
</div>
<canvas id="pixelCanvas" class="pixelartgenerator3841-canvas"></canvas>
<div class="pixelartgenerator3841-controls">
<input type="color" id="colorPicker" class="pixelartgenerator3841-color-picker">
<button id="eraseBtn" class="pixelartgenerator3841-button">Erase</button>
<button id="clearBtn" class="pixelartgenerator3841-button">Clear</button>
<button id="exportBtn" class="pixelartgenerator3841-button">Export</button>
</div>
<div id="colorHistory" class="pixelartgenerator3841-color-history"></div>
<div class="pixelartgenerator3841-instructions">
<h3>Instructions:</h3>
<ul>
<li>Set the grid size and click "Create Grid"</li>
<li>Click and drag on the canvas to draw</li>
<li>Use the color picker to change colors</li>
<li>Click on color swatches to reuse colors</li>
<li>Click "Erase" to switch to eraser mode</li>
<li>Click "Clear" to reset the canvas</li>
<li>Click "Export" to save your artwork as PNG</li>
</ul>
</div>
</div>
<script>
const canvas = document.getElementById('pixelCanvas');
const ctx = canvas.getContext('2d');
const colorPicker = document.getElementById('colorPicker');
const eraseBtn = document.getElementById('eraseBtn');
const clearBtn = document.getElementById('clearBtn');
const exportBtn = document.getElementById('exportBtn');
const columnsInput = document.getElementById('columnsInput');
const rowsInput = document.getElementById('rowsInput');
const createGridBtn = document.getElementById('createGridBtn');
const colorHistory = document.getElementById('colorHistory');
let pixelSize = 16;
let gridColumns = 30;
let gridRows = 20;
let isDrawing = false;
let isErasing = false;
let usedColors = new Set();
let pixelColors = [];
function createGrid() {
gridColumns = Math.min(Math.max(parseInt(columnsInput.value) || 30, 1), 50);
gridRows = Math.min(Math.max(parseInt(rowsInput.value) || 20, 1), 50);
canvas.width = gridColumns * pixelSize;
canvas.height = gridRows * pixelSize;
pixelColors = Array(gridRows).fill().map(() => Array(gridColumns).fill('#ffffff'));
redrawCanvas();
}
function redrawCanvas() {
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, canvas.width, canvas.height);
for (let y = 0; y < gridRows; y++) {
for (let x = 0; x < gridColumns; x++) {
ctx.fillStyle = pixelColors[y][x];
ctx.fillRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);
}
}
drawGrid();
}
function drawGrid() {
ctx.strokeStyle = '#ccc';
for (let i = 0; i <= gridColumns; i++) {
ctx.beginPath();
ctx.moveTo(i * pixelSize, 0);
ctx.lineTo(i * pixelSize, canvas.height);
ctx.stroke();
}
for (let i = 0; i <= gridRows; i++) {
ctx.beginPath();
ctx.moveTo(0, i * pixelSize);
ctx.lineTo(canvas.width, i * pixelSize);
ctx.stroke();
}
}
function fillPixel(x, y) {
const pixelX = Math.floor(x / pixelSize);
const pixelY = Math.floor(y / pixelSize);
const color = isErasing ? '#ffffff' : colorPicker.value;
pixelColors[pixelY][pixelX] = color;
redrawCanvas();
if (!isErasing) {
addColorToHistory(color);
}
}
function addColorToHistory(color) {
if (!usedColors.has(color)) {
usedColors.add(color);
const swatch = document.createElement('div');
swatch.className = 'pixelartgenerator3841-color-swatch';
swatch.style.backgroundColor = color;
swatch.addEventListener('click', () => {
colorPicker.value = color;
});
colorHistory.appendChild(swatch);
}
}
canvas.addEventListener('mousedown', (e) => {
isDrawing = true;
fillPixel(e.offsetX, e.offsetY);
});
canvas.addEventListener('mousemove', (e) => {
if (isDrawing) {
fillPixel(e.offsetX, e.offsetY);
}
});
canvas.addEventListener('mouseup', () => {
isDrawing = false;
});
canvas.addEventListener('mouseleave', () => {
isDrawing = false;
});
eraseBtn.addEventListener('click', () => {
isErasing = !isErasing;
eraseBtn.textContent = isErasing ? 'Draw' : 'Erase';
});
clearBtn.addEventListener('click', () => {
pixelColors = Array(gridRows).fill().map(() => Array(gridColumns).fill('#ffffff'));
redrawCanvas();
});
exportBtn.addEventListener('click', () => {
const link = document.createElement('a');
link.download = 'pixel-art.png';
link.href = canvas.toDataURL();
link.click();
});
createGridBtn.addEventListener('click', createGrid);
// Initialize
createGrid();
</script>
</body>
</html>