diff --git a/JavaScript/Mini Paint/README.md b/JavaScript/Mini Paint/README.md new file mode 100644 index 0000000..8a75b9b --- /dev/null +++ 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 new file mode 100644 index 0000000..041a90c --- /dev/null +++ b/JavaScript/Mini Paint/index.html @@ -0,0 +1,21 @@ + + + + + + Paint Application + + + +
+ + + + + + +
+ + + + \ No newline at end of file diff --git a/JavaScript/Mini Paint/output.jpg b/JavaScript/Mini Paint/output.jpg new file mode 100644 index 0000000..84a9f17 Binary files /dev/null and b/JavaScript/Mini Paint/output.jpg differ diff --git a/JavaScript/Mini Paint/script.js b/JavaScript/Mini Paint/script.js new file mode 100644 index 0000000..8ccf247 --- /dev/null +++ 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 new file mode 100644 index 0000000..d5bf52c --- /dev/null +++ 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; + } + \ No newline at end of file