completed drawing app

tsr-kairi · Jul 6, 2021 · 6510293 · 6510293
1 parent acba9b0
commit 6510293
Show file tree

Hide file tree

Showing 3 changed files with 120 additions and 0 deletions.
diff --git a/Day 22 - Drawing App/app.js b/Day 22 - Drawing App/app.js
@@ -0,0 +1,51 @@
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+
+let size = 20;
+let isPressed = false;
+let color = "black";
+let x;
+let y;
+
+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;
+  }
+});
+
+function drawcircle(x, y) {
+  ctx.beginPath();
+  ctx.arc(x, y, size, 0, Math.PI * 2); // Outer circle
+  ctx.fillStyle = color;
+  ctx.fill();
+}
+
+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();
+}
diff --git a/Day 22 - Drawing App/index.html b/Day 22 - Drawing App/index.html
@@ -0,0 +1,22 @@
+<!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" />
+    <link rel="stylesheet" href="./style.css" />
+    <title>Drawing | App</title>
+  </head>
+  <body>
+    <canvas id="canvas" width="400" height="400"></canvas>
+    <div class="toolbox">
+      <button id="decrease">-</button>
+      <span id="size">20</span>
+      <button id="increase">+</button>
+      <input type="color" id="color" />
+      <button id="clear">X</button>
+    </div>
+
+    <script src="./app.js"></script>
+  </body>
+</html>
diff --git a/Day 22 - Drawing App/style.css b/Day 22 - Drawing App/style.css
@@ -0,0 +1,47 @@
+*::after,
+*::before {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  margin: 0;
+}
+
+canvas {
+  border: 2px solid steelblue;
+}
+
+.toolbox {
+  background-color: steelblue;
+  border: 1px solid slateblue;
+  display: flex;
+  width: 396px;
+  padding: 0.2rem;
+}
+
+.toolbox > * {
+  background-color: white;
+  border: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  height: 30px;
+  width: 30px;
+  margin: 0.25rem;
+  padding: 0.25rem;
+  cursor: pointer;
+}
+
+.toolbox > *:last-child {
+  margin-left: auto;
+  cursor: pointer;
+}