Merge pull request khushi-purwar#17 from chandu6111/drawing_app

Drawing app using JS
rittikadeb · Dec 25, 2021 · 2607ee0 · 2607ee0
2 parents 6d42042 + 25f83e6
commit 2607ee0
Show file tree

Hide file tree

Showing 5 changed files with 261 additions and 0 deletions.
diff --git a/Drawing App/Assets/css/style.css b/Drawing App/Assets/css/style.css
@@ -0,0 +1,119 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background: #fcd1d1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+}
+
+/* canvas styling */
+
+#canvas {
+  border: 4px solid #ef4f4f;
+  background: #fff;
+}
+
+/* toolbox styling */
+
+.toolbox {
+  background-color: #ef4f4f;
+  display: flex;
+  width: 808px;
+  padding: 12px;
+}
+
+/* styling every element in toolbox */
+
+.toolbox > * {
+  background-color: #fff;
+  border: none;
+  border-radius: 5px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  height: 40px;
+  width: 40px;
+  margin: 5px;
+  padding: 5px;
+  cursor: pointer;
+  color: black;
+  border: 2px solid black;
+}
+
+/* styling clear button */
+
+.toolbox > *:last-child {
+  margin-left: auto;
+  color: white;
+  background: #000;
+  border: 2px solid white;
+}
+
+button:focus {
+  outline: none;
+}
+input:focus {
+  outline: none;
+}
+
+/* Making website Responsive with media-queries */
+
+@media (min-width: 320px) and (max-width: 375px) {
+  #canvas {
+    width: 300px;
+    height: 250px;
+  }
+  .toolbox {
+    background-color: #ef4f4f;
+    display: flex;
+    width: 300px;
+    padding: 10px;
+  }
+}
+
+@media (min-width: 375px) and (max-width: 425px) {
+  #canvas {
+    width: 330px;
+    height: 300px;
+  }
+  .toolbox {
+    background-color: #ef4f4f;
+    display: flex;
+    width: 330px;
+    padding: 10px;
+  }
+}
+
+@media (min-width: 425px) and (max-width: 767px) {
+  #canvas {
+    width: 400px;
+    height: 350px;
+  }
+  .toolbox {
+    background-color: #ef4f4f;
+    display: flex;
+    width: 400px;
+    padding: 10px;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1023px) {
+  #canvas {
+    width: 700px;
+    height: 400px;
+  }
+  .toolbox {
+    background-color: #ef4f4f;
+    display: flex;
+    width: 700px;
+    padding: 10px;
+  }
+}
diff --git a/Drawing App/Assets/media/screenshot_drawingapp.png b/Drawing App/Assets/media/screenshot_drawingapp.png
diff --git a/Drawing App/Readme.MD b/Drawing App/Readme.MD
@@ -0,0 +1,15 @@
+# Drawing App 
+
+## About the Project
+
+This is a Drawing App with a canvas for drawing, and additional buttons like + (for increasing the size), - (for decreasing the size), color picker and X (for clearing the screen) were added.
+
+## Tech Stacks Used
+
+![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white)
+![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white)
+![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
+
+
+## Screenshots
+![screenshot](https://github.com/chandu6111/WebDev-ProjectKart/blob/drawing_app/Drawing%20App/Assets/media/screenshot_drawingapp.png)
diff --git a/Drawing App/index.html b/Drawing App/index.html
@@ -0,0 +1,34 @@
+<!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">
+    <title>Drawing App</title>
+    <link rel="stylesheet" href="Assets/css/style.css"/>
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Itim&display=swap" rel="stylesheet">
+
+</head>
+
+<body>
+    <!--creating a canvas to draw-->
+    <canvas id="canvas" width="800" height="500"></canvas>
+
+    <!--A Drawing Toolbox containing buttons to choose size, color and clear drawing-->
+    <div class="toolbox">
+        <button id="decrease">-</button>
+        <span id="size" style="font-family: 'Itim', cursive;">5</span>
+        <button id="increase">+</button>
+        <input type="color" id="color">
+        <button id="clear">
+            <p style="font-family: 'Itim', cursive;">C</p>
+        </button>
+
+    </div>
+
+    <!--Connecting to JavaScript file-->
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Drawing App/script.js b/Drawing App/script.js
@@ -0,0 +1,93 @@
+//creating variables for all the elements
+
+let canvas = document.getElementById("canvas");
+let increaseButton = document.getElementById("increase");
+let decreaseButton = document.getElementById("decrease");
+let sizeElement = document.getElementById("size");
+let colorElement = document.getElementById("color");
+let clearElement = document.getElementById("clear");
+
+var ctx = canvas.getContext("2d");
+let size = 5;
+let isPressed = false;
+let color = "black";
+let x;
+let y;
+
+// Adding Event Listeners
+
+canvas.addEventListener("mousedown", (e) => {
+  isPressed = true;
+
+  x = e.offsetX;
+  y = e.offsetY;
+});
+
+canvas.addEventListener("mouseup", (e) => {
+  isPressed = false;
+
+  x = undefined;
+  y = undefined;
+});
+
+canvas.addEventListener("mousemove", (e) => {
+  if (isPressed) {
+    const x2 = e.offsetX;
+    const y2 = e.offsetY;
+
+    drawCircle(x2, y2);
+    drawLine(x, y, x2, y2);
+
+    x = x2;
+    y = y2;
+  }
+});
+
+//drawing a circle
+function drawCircle(x, y) {
+  ctx.beginPath();
+  ctx.arc(x, y, size, 0, Math.PI * 2);
+  ctx.fillStyle = color;
+  ctx.fill();
+}
+
+//drawing a line
+function drawLine(x1, y1, x2, y2) {
+  ctx.beginPath();
+  ctx.moveTo(x1, y1);
+  ctx.lineTo(x2, y2);
+  ctx.strokeStyle = color;
+  ctx.lineWidth = size * 2;
+  ctx.stroke();
+}
+
+//update size as we increase or decrease it
+function updateSizeOnScreen() {
+  sizeElement.innerText = size;
+}
+
+// Button OnClick
+increaseButton.addEventListener("click", () => {
+  size += 1;
+
+  if (size > 30) {
+    size = 30;
+  }
+
+  updateSizeOnScreen();
+});
+
+decreaseButton.addEventListener("click", () => {
+  size -= 1;
+
+  if (size < 1) {
+    size = 1;
+  }
+
+  updateSizeOnScreen();
+});
+
+colorElement.addEventListener("change", (e) => (color = e.target.value));
+clearElement.addEventListener("click", () =>
+  ctx.clearRect(0, 0, canvas.width, canvas.height)
+);