Merge pull request pranjay-poddar#1264 from aman-kumar29/web-paint-br…

…anch Web paint branch
amelia2802 · May 29, 2023 · 2811dd4 · 2811dd4
2 parents 63249dc + 574d9eb
commit 2811dd4
Show file tree

Hide file tree

Showing 5 changed files with 354 additions and 0 deletions.
diff --git a/Frontend-Projects/Web Paint/README.md b/Frontend-Projects/Web Paint/README.md
@@ -0,0 +1,41 @@
+# Web Paint Website
+
+This repository contains the code for a basic web paint application. Users can use this application to draw and paint on a virtual canvas using various tools and colors. This README file provides an overview of the project and instructions on how to run the web paint website locally.
+
+## Features
+
+- Canvas: Provides a blank canvas for drawing and painting.
+- Brush Tool: Allows users to draw freehand lines.
+- Eraser Tool: Enables users to erase parts of their drawing.
+- Color Palette: Offers a selection of colors for drawing.
+- Brush Size: Allows users to adjust the size of the brush.
+- Clear Canvas: Clears the entire canvas.
+- Save Image: Saves the drawing as an image file.
+
+## Technologies Used
+
+The web paint website is built using the following technologies:
+
+- HTML: Provides the structure and layout of the website.
+- CSS: Defines the styles and appearance of the website.
+- JavaScript: Implements the interactive functionality of the paint application.
+
+## Getting Started
+
+To run the web paint website locally, follow these steps:
+
+1. Clone the repository:
+
+   ```bash
+   https://github.com/aman-kumar29/Web-Paint.git
+2. Navigate to the project directory:
+
+   ```bash
+   cd Web-Paint
+3. Open the index.html file in your web browser:
+
+   ```bash
+   open index.html
+## Contributing
+Contributions to the web paint website are welcome. If you find any issues or have suggestions for improvements, please submit a pull request. Ensure that your changes are well-documented and thoroughly tested.
+
diff --git a/Frontend-Projects/Web Paint/index.html b/Frontend-Projects/Web Paint/index.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="index.js" defer></script>
+    <link rel="shortcut icon" href="./pencil.png" type="image/x-icon">
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
+        integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <title>Web Paint</title>
+</head>
+
+<body>
+    <header>
+        <h2> Web Paint </h2>
+        <div class="tools">
+            <button type="button" title="Eraser" onclick="erase()" class="btn"><i class="fa-solid fa-eraser"></i></button>
+            <button type="button" title="Save Sketch" onclick="onSave()" class="btn"><i class="fa-solid fa-floppy-disk"></i></button>
+            <button type="button" class="color-btn btn">
+                <input type="color" id="color-picker">
+                <label for="color-picker">
+                    <div></div>
+                    Color
+                </label>
+            </button>
+            <button onclick="sizeList()" class="size-btn btn"><i class="fa-solid fa-pen"></i><span>Size</span><i
+                    class="fa-solid fa-caret-down"></i>
+                <ul class="size-list">
+                    <li>
+                        <div class="size" style="--set-size:02px"></div>
+                    </li>
+                    <li>
+                        <div class="size" style="--set-size:05px"></div>
+                    </li>
+                    <li>
+                        <div class="size" style="--set-size:08px"></div>
+                    </li>
+                    <li>
+                        <div class="size" style="--set-size:10px"></div>
+                    </li>
+                    <li>
+                        <div class="size" style="--set-size:15px"></div>
+                    </li>
+                </ul>
+            </button>
+            <div class="color-palette">
+                <span class="color" style="--set-color:#000000"></span>
+                <span class="color" style="--set-color:#808080"></span>
+                <span class="color" style="--set-color:#800000"></span>
+                <span class="color" style="--set-color:#ff0000"></span>
+                <span class="color" style="--set-color:#ff4500"></span>
+                <span class="color" style="--set-color:#ffff00"></span>
+                <span class="color" style="--set-color:#008000"></span>
+                <span class="color" style="--set-color:#00a2e8"></span>
+                <span class="color" style="--set-color:#3f48cc"></span>
+                <span class="color" style="--set-color:#a349a4"></span>
+                <span class="color" style="--set-color:#ffffff"></span>
+                <span class="color" style="--set-color:#c3c3c3"></span>
+                <span class="color" style="--set-color:#b97a57"></span>
+                <span class="color" style="--set-color:#ffaec9"></span>
+                <span class="color" style="--set-color:#ffc90e"></span>
+                <span class="color" style="--set-color:#efe4b0"></span>
+                <span class="color" style="--set-color:#b5e61d"></span>
+                <span class="color" style="--set-color:#99d9ea"></span>
+                <span class="color" style="--set-color:#7092be"></span>
+                <span class="color" style="--set-color:#c8bfe7"></span>
+            </div>
+        </div>
+    </header>
+    <div class="canvas-container">
+        <canvas id="draw"></canvas>
+
+    </div>
+</body>
+</html>
diff --git a/Frontend-Projects/Web Paint/index.js b/Frontend-Projects/Web Paint/index.js
@@ -0,0 +1,113 @@
+var canvas = document.getElementById("draw");
+var ctx = canvas.getContext("2d");
+let color = "#000";
+let offsetX = canvas.offsetLeft;
+let offsetY = canvas.offsetTop;
+let brushthickness = 7;
+const erase = () => (ctx.globalCompositeOperation = "destination-out");
+//set current color
+document.querySelector(".color-btn div").style.backgroundColor = color;
+
+resize();
+
+function sizeList() {
+  document.querySelector(".size-list").classList.toggle("show-list");
+  brushSize();
+}
+
+// Set brush Size
+
+function brushSize() {
+  var brushSet = document.getElementsByClassName("size");
+  Array.prototype.forEach.call(brushSet, function (element) {
+    element.addEventListener("click", function () {
+      brushthickness = element.getAttribute("style").substr(11, 2);
+      console.log(brushthickness);
+    });
+  });
+}
+
+//Set Color Palette
+
+function setActiveColor() {
+  document.querySelector(".color-btn div").style.backgroundColor = color;
+  ctx.strokeStyle = color;
+  ctx.globalCompositeOperation = "source-over";
+}
+
+//Set Color To Brush
+
+function setColor() {
+  var palette = document.getElementsByClassName("color");
+  Array.prototype.forEach.call(palette, function (element) {
+    element.addEventListener("click", function () {
+      color = element.getAttribute("style").split("--set-color:")[1];
+      setActiveColor();
+    });
+  });
+}
+
+//Color Picker
+function colorPick() {
+  color = document.getElementById("color-picker").value;
+  setActiveColor();
+}
+
+//Resize Canvas
+
+
+function resize() {
+  ctx.canvas.width = window.innerWidth - 20;
+  ctx.canvas.height = window.innerHeight;
+}
+
+//Set Cursor Position
+
+// initialize position as 0,0
+var pos = { x: 0, y: 0 };
+
+// new position from mouse events
+
+function setPosition(e) {
+  pos.x = parseInt(e.clientX - offsetX);
+  pos.y = parseInt(e.clientY - offsetY);
+}
+
+//Draw
+
+function draw(e) {
+  if (e.buttons !== 1) return; // if mouse is not clicked, do not go further
+
+  ctx.beginPath(); // begin the drawing path
+  ctx.lineWidth = brushthickness; // width of line
+  ctx.lineCap = "round"; // rounded end cap
+  ctx.strokeStyle = color; // hex color of line
+  ctx.moveTo(pos.x, pos.y); // from position
+  setPosition(e);
+  ctx.lineTo(pos.x, pos.y); // to position
+  ctx.closePath();
+  ctx.stroke(); // draw it!
+}
+
+// Download Canvas
+
+function onSave() {
+  const link = document.createElement('a');
+  link.download = 'sketch.png';
+  link.href = canvas.toDataURL();
+  link.click();
+  link.delete;
+}
+
+// add window event listener to trigger when window is resized
+window.addEventListener("resize", resize);
+
+// add event listeners to trigger on different mouse events
+document.addEventListener("mousemove", draw);
+document.addEventListener("mousedown", setPosition);
+document.addEventListener("mouseenter", setPosition);
+document.addEventListener("touchmove", draw);
+document.addEventListener("touchend", setPosition);
+document.addEventListener("touchstart", setPosition);
+document.getElementById("color-picker").addEventListener("change", colorPick);
+setColor();
diff --git a/Frontend-Projects/Web Paint/pencil.png b/Frontend-Projects/Web Paint/pencil.png
diff --git a/Frontend-Projects/Web Paint/style.css b/Frontend-Projects/Web Paint/style.css
@@ -0,0 +1,121 @@
+@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200;300;400;500;600;700;800&display=swap');
+@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");
+:root{
+    --font-main: 'Dosis', sans-serif;
+}
+body{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: var(--font-main);
+    color: rgb(19, 19, 88);
+}
+header{
+    width: 90%;
+    margin: 0 auto;
+    display: flex;
+    padding: 8px 5%;
+    background-color: #fafafb;
+    justify-content: space-between;
+    box-shadow: 0px 2px 5px rgb(88 93 111 / 40%);
+    align-items: center;
+}
+.tools{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+}
+.color-palette{
+    display: grid;
+    grid-template-columns: repeat(10, 15px);
+    grid-gap: 5px;
+}
+.color{
+    width: 15px;
+    height: 15px;
+    border: .8px solid rgb(207, 205, 205);
+    background-color: var(--set-color);
+    cursor: pointer;
+}
+.canvas-container{
+    height: 90vh;
+    cursor: url(./pencil.png), auto;
+}
+
+.btn{
+    font-family: var(--font-main);
+    font-weight: 500;
+    font-size: 14px;
+    color: rgb(19, 19, 88);
+    background: none;
+    border: .8px solid rgb(207, 205, 205);
+    position: relative;
+}
+.btn:hover{
+    background: rgba(212, 203, 203, 0.235);
+}
+
+.color-btn{
+    width: 50px;
+    padding: 5px 5px;
+    position: relative;
+}
+.color-btn div{
+    width: 100%;
+    height: 20px;
+    margin: 0;
+    padding: 0;
+    background-color: green;
+}
+.size-btn{
+    padding: 5px;
+}
+.size-btn span{
+    margin: 0 8px;
+}
+.size-list{
+    list-style: none;
+    display: none;
+    position: absolute;
+    top: 20px;
+    width: 100%;
+    left: 0;
+    border-radius: 2px;
+    background-color: white;
+    box-shadow: 0px 4px 30px rgba(165, 190, 204, 0.25);
+    border: .8px solid rgb(207, 205, 205);
+    padding: 0;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 10px;
+}
+.show-list{
+    display: flex;
+}
+.size-list li{
+    width: 85%;
+}
+.size-list li div{
+    width: 100%;
+    height: var(--set-size);
+    background-color: rgb(19, 19, 88);
+    margin-bottom: 10px;
+    cursor: pointer;
+}
+.color_box{
+    width: 100%;
+}
+.color_box input[type=checkbox]{
+    display: none;
+    box-sizing: border-box;
+}
+.color_box span{
+    box-sizing: border-box;
+}
+input[type=color]{
+    opacity: 0;
+    visibility: hidden;
+    position: absolute;
+    left: 0;
+}