Merge pull request #719 from sanjevraj-J/patch-6

Pixel_art
Ayushparikh-code · Oct 27, 2024 · 2e86fcd · 2e86fcd
2 parents 00ec7d8 + 2026fd8
commit 2e86fcd
Showing 1 changed file with 102 additions and 0 deletions.
diff --git a/Pixel_art.html b/Pixel_art.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pixel Art Maker</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f4f4f4;
+            margin: 0;
+            padding: 20px;
+        }
+
+        .container {
+            max-width: 600px;
+            margin: auto;
+            text-align: center;
+            background: #fff;
+            padding: 20px;
+            border-radius: 5px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        h1 {
+            margin-bottom: 20px;
+        }
+
+        .controls {
+            margin-bottom: 20px;
+        }
+
+        canvas {
+            border: 1px solid #ccc;
+            cursor: crosshair;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Pixel Art Maker</h1>
+        <div class="controls">
+            <input type="color" id="colorPicker" value="#000000">
+            <button id="clearBtn">Clear Canvas</button>
+            <button id="downloadBtn">Download as PNG</button>
+        </div>
+        <canvas id="canvas" width="400" height="400"></canvas>
+    </div>
+
+    <script>
+        const canvas = document.getElementById('canvas');
+        const ctx = canvas.getContext('2d');
+        const colorPicker = document.getElementById('colorPicker');
+        const clearBtn = document.getElementById('clearBtn');
+        const downloadBtn = document.getElementById('downloadBtn');
+
+        let painting = false;
+        let currentColor = colorPicker.value;
+
+        const pixelSize = 20;
+        canvas.width = 400;
+        canvas.height = 400;
+
+        canvas.addEventListener('mousedown', startPainting);
+        canvas.addEventListener('mouseup', stopPainting);
+        canvas.addEventListener('mousemove', paint);
+        colorPicker.addEventListener('input', (e) => currentColor = e.target.value);
+        clearBtn.addEventListener('click', clearCanvas);
+        downloadBtn.addEventListener('click', downloadImage);
+
+        function startPainting(e) {
+            painting = true;
+            paint(e);
+        }
+
+        function stopPainting() {
+            painting = false;
+            ctx.beginPath();
+        }
+
+        function paint(e) {
+            if (!painting) return;
+            const rect = canvas.getBoundingClientRect();
+            const x = Math.floor((e.clientX - rect.left) / pixelSize) * pixelSize;
+            const y = Math.floor((e.clientY - rect.top) / pixelSize) * pixelSize;
+            ctx.fillStyle = currentColor;
+            ctx.fillRect(x, y, pixelSize, pixelSize);
+        }
+
+        function clearCanvas() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+        }
+
+        function downloadImage() {
+            const link = document.createElement('a');
+            link.download = 'pixel-art.png';
+            link.href = canvas.toDataURL();
+            link.click();
+        }
+    </script>
+</body>
+</html>