drawing app complete

kyvycodes · Oct 1, 2021 · cc1adee · cc1adee
1 parent 6b47d3c
commit cc1adee
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 6 deletions.
diff --git a/drawing-app/index.html b/drawing-app/index.html
@@ -11,7 +11,7 @@
   <canvas id="canvas" width='800px' height='800px'></canvas>
   <div class='toolbox'>
     <button id='increase'>+</button>
-    <span id='size'>30</span>
+    <span id='size'>25</span>
     <button id='decrease'>-</button>
     <input type='color' id='color' />
     <button id='clear'>🧼</button>

diff --git a/drawing-app/script.js b/drawing-app/script.js
@@ -10,7 +10,7 @@ const colorElement = document.getElementById('color')
 const clearBtn = document.getElementById('clear')
 
 
-let size = 20;
+let size = 25;
 let isCurrentlyPressed = false;
 let color = 'black';
 let x = undefined;
@@ -82,7 +82,7 @@ function drawLine(x1, y1, x2, y2) {
   ctx.moveTo(x1, y1)
   ctx.lineTo(x2, y2)
   ctx.strokeStyle = color;
-  ctx.lineWidth = size;
+  ctx.lineWidth = size * 2;
   ctx.stroke()
 }
 

diff --git a/drawing-app/style.css b/drawing-app/style.css
@@ -5,7 +5,7 @@
 }
 
 body {
-  background-color: #ecd1d1;
+  background-color: #f5f5f5;
   font-family: "Poppins", sans-serif;
   margin: 0;
   display: flex;
@@ -18,14 +18,14 @@ body {
 canvas {
   width: 800px;
   height: 800px;
-  border: 7px solid pink;
+  border: 7px solid #ecd1d1;
   background-color: #f5f5f5;
 }
 
 .toolbox {
   padding: 1rem;
   width: 800px;
-  background-color: whitesmoke;
+  background-color: #ecd1d1;
   display: flex;
 }
 
@@ -40,6 +40,7 @@ canvas {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  color: white
 }
 
 .toolbox > *:last-child {