Merge pull request #453 from SitaGanesh/194-mini-paint

Mini Paint
bislara · Jan 2, 2025 · 3d0f9e0 · 3d0f9e0
2 parents 6a32ff8 + 865b46c
commit 3d0f9e0
Show file tree

Hide file tree

Showing 5 changed files with 174 additions and 0 deletions.
diff --git a/JavaScript/Mini Paint/README.md b/JavaScript/Mini Paint/README.md
@@ -0,0 +1,24 @@
+# Mini Paint
+mini-paint folder with HTML, CSS, and JS files. which creates a webpage having the paint application with features like selecting a color, brush size, and eraser, clearing the board completely, downloading the drawn image in PNG or JPG format.
+
+
+## Features
+
+- **Color Selection**: Choose your preferred drawing color.
+- **Brush Size**: Adjust the size of the brush for detailed or broad strokes.
+- **Eraser Tool**: Erase parts of your drawing with ease.
+- **Clear Board**: Reset the entire canvas to start a new drawing.
+- **Download Artwork**: Save your creation as a PNG or JPG image file.
+
+## Usage
+
+1. Launch the application by opening the `index.html` file in a modern web browser.
+2. Use the provided tools to create your artwork:
+   - Select a color and brush size for drawing.
+   - Use the eraser tool to remove unwanted parts.
+   - Clear the board to start afresh.
+   - Save your artwork by downloading it as a PNG or JPG file.
+
+![Paint Application Screenshot](output.jpg "Mini Paint Screenshot")
+
+Enjoy painting with Mini Paint! 
diff --git a/JavaScript/Mini Paint/index.html b/JavaScript/Mini Paint/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Paint Application</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div class="toolbar">
+    <input type="color" id="color-picker" title="Choose Color">
+    <input type="range" id="brush-size" min="1" max="50" value="5" title="Brush Size">
+    <button id="eraser">Eraser</button>
+    <button id="clear-board">Clear Board</button>
+    <button id="download-png">Download PNG</button>
+    <button id="download-jpg">Download JPG</button>
+  </div>
+  <canvas id="paint-canvas"></canvas>
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/JavaScript/Mini Paint/output.jpg b/JavaScript/Mini Paint/output.jpg
diff --git a/JavaScript/Mini Paint/script.js b/JavaScript/Mini Paint/script.js
@@ -0,0 +1,95 @@
+const canvas = document.getElementById('paint-canvas');
+const ctx = canvas.getContext('2d');
+
+canvas.width = window.innerWidth * 0.8;
+canvas.height = window.innerHeight * 0.7;
+
+let painting = false;
+let currentColor = '#000000';
+let brushSize = 5;
+let isEraser = false;
+
+// Start drawing
+function startDrawing(e) {
+  painting = true;
+  draw(e);
+}
+
+// Stop drawing
+function stopDrawing() {
+  painting = false;
+  ctx.beginPath();
+}
+
+// Draw on the canvas
+function draw(e) {
+  if (!painting) return;
+
+  ctx.lineWidth = brushSize;
+  ctx.lineCap = 'round';
+  ctx.strokeStyle = isEraser ? '#FFFFFF' : currentColor;
+
+  ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
+}
+
+// Clear canvas
+document.getElementById('clear-board').addEventListener('click', () => {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+});
+
+// Change color
+document.getElementById('color-picker').addEventListener('input', (e) => {
+  currentColor = e.target.value;
+  isEraser = false;
+  canvas.style.cursor = 'crosshair';
+});
+
+// Change brush size
+document.getElementById('brush-size').addEventListener('input', (e) => {
+  brushSize = e.target.value;
+});
+
+// Toggle eraser
+document.getElementById('eraser').addEventListener('click', () => {
+  isEraser = true;
+  canvas.style.cursor = 'not-allowed';
+});
+
+//Added button to switch pencil function
+//dynamic pencil button
+const toolbar=document.querySelector('.toolbar');
+const pencil=document.createElement('button');
+pencil.id='pencil';
+pencil.textContent='Pencil';
+//Button is created
+const firstButton = toolbar.querySelector('button');
+toolbar.insertBefore(pencil, firstButton);
+
+document.getElementById('pencil').addEventListener('click', () => {
+  isEraser = false;
+  canvas.style.cursor = 'crosshair';
+})
+
+// Download as PNG
+document.getElementById('download-png').addEventListener('click', () => {
+  const link = document.createElement('a');
+  link.download = 'drawing.png';
+  link.href = canvas.toDataURL();
+  link.click();
+});
+
+// Download as JPG
+document.getElementById('download-jpg').addEventListener('click', () => {
+  const link = document.createElement('a');
+  link.download = 'drawing.jpg';
+  link.href = canvas.toDataURL('image/jpeg');
+  link.click();
+});
+
+// Event listeners for drawing
+canvas.addEventListener('mousedown', startDrawing);
+canvas.addEventListener('mouseup', stopDrawing);
+canvas.addEventListener('mousemove', draw);
diff --git a/JavaScript/Mini Paint/styles.css b/JavaScript/Mini Paint/styles.css
@@ -0,0 +1,34 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100vh;
+    background-color: #f4f4f4;
+    font-family: Arial, sans-serif;
+  }
+  @media only screen and (max-width: 600px){
+    body{
+        height: 100vh;
+        width: 100vw;
+    }
+  }
+  .toolbar {
+    margin: 10px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+
+  #paint-canvas {
+    border: 2px solid #000;
+    cursor: crosshair;
+
+    background-color: #ffffff; 
+  }
+