From a9c60fb467abdc3fad101dac094f2c893fcf7296 Mon Sep 17 00:00:00 2001 From: SitaGanesh Date: Thu, 12 Dec 2024 19:07:38 +0530 Subject: [PATCH 1/4] Added a mini paint folder which is a webpages having the paint application with features like selecting a color, brush size, eraser, clearing the board completely, download the drawn image in PNG or JPG format --- JavaScript/Mini Paint/index.html | 21 +++++++++ JavaScript/Mini Paint/script.js | 78 ++++++++++++++++++++++++++++++++ JavaScript/Mini Paint/styles.css | 34 ++++++++++++++ 3 files changed, 133 insertions(+) create mode 100644 JavaScript/Mini Paint/index.html create mode 100644 JavaScript/Mini Paint/script.js create mode 100644 JavaScript/Mini Paint/styles.css 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/script.js b/JavaScript/Mini Paint/script.js new file mode 100644 index 0000000..d96ab08 --- /dev/null +++ b/JavaScript/Mini Paint/script.js @@ -0,0 +1,78 @@ +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; +}); + +// Change brush size +document.getElementById('brush-size').addEventListener('input', (e) => { + brushSize = e.target.value; +}); + +// Toggle eraser +document.getElementById('eraser').addEventListener('click', () => { + isEraser = true; +}); + +// 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 From ffeff99083fcc11cb3e8f597464b3b810cd67866 Mon Sep 17 00:00:00 2001 From: SitaGanesh Date: Thu, 12 Dec 2024 20:27:21 +0530 Subject: [PATCH 2/4] Added README.md file and output.jpg files --- JavaScript/Mini Paint/README.md | 24 ++++++++++++++++++++++++ JavaScript/Mini Paint/output.jpg | Bin 0 -> 38507 bytes 2 files changed, 24 insertions(+) create mode 100644 JavaScript/Mini Paint/README.md create mode 100644 JavaScript/Mini Paint/output.jpg 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/output.jpg b/JavaScript/Mini Paint/output.jpg new file mode 100644 index 0000000000000000000000000000000000000000..84a9f1713aae69787d75d2cbc6961c07dfe90db8 GIT binary patch literal 38507 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 literal 0 HcmV?d00001 From ad9adc77906969f6f6edab3686ea6f8fbf2094f9 Mon Sep 17 00:00:00 2001 From: Sita Ganesh Date: Thu, 2 Jan 2025 18:54:26 +0530 Subject: [PATCH 3/4] Added Pencil button Pencil button functionality is added and a `not-allowed` cursor style for the eraser button for a better UI. --- JavaScript/Mini Paint/script.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/JavaScript/Mini Paint/script.js b/JavaScript/Mini Paint/script.js index d96ab08..8661843 100644 --- a/JavaScript/Mini Paint/script.js +++ b/JavaScript/Mini Paint/script.js @@ -44,6 +44,7 @@ document.getElementById('clear-board').addEventListener('click', () => { document.getElementById('color-picker').addEventListener('input', (e) => { currentColor = e.target.value; isEraser = false; + canvas.style.cursor = 'crosshair'; }); // Change brush size @@ -54,8 +55,23 @@ document.getElementById('brush-size').addEventListener('input', (e) => { // 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 +toolbar.appendChild(pencil); + +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'); From 865b46c34cf0cf7fa3e387e894891d616f6386bf Mon Sep 17 00:00:00 2001 From: Sita Ganesh Date: Thu, 2 Jan 2025 22:35:29 +0530 Subject: [PATCH 4/4] Updated pencil button to first Updated the pencil button at the beginning of the buttons --- JavaScript/Mini Paint/script.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/JavaScript/Mini Paint/script.js b/JavaScript/Mini Paint/script.js index 8661843..8ccf247 100644 --- a/JavaScript/Mini Paint/script.js +++ b/JavaScript/Mini Paint/script.js @@ -65,7 +65,8 @@ const pencil=document.createElement('button'); pencil.id='pencil'; pencil.textContent='Pencil'; //Button is created -toolbar.appendChild(pencil); +const firstButton = toolbar.querySelector('button'); +toolbar.insertBefore(pencil, firstButton); document.getElementById('pencil').addEventListener('click', () => { isEraser = false;