feat: change drawing color option

Author: kyvycodes

drawing-app/index.html

@@ -11,6 +11,8 @@
   <canvas id="canvas" width='800px' height='800px'></canvas>
   <div class='toolbox'>
     <button id='increase'>+</button>
+    <span id='size'>30</span>
     <button id='decrease'>-</button>
+    <input type='color' id='color' />
   </div>
 </html>

drawing-app/script.js

@@ -5,9 +5,12 @@ const ctx = canvas.getContext('2d')
 
 const increaseBtn = document.getElementById('increase')
 const decreaseBtn = document.getElementById('decrease')
+const sizeElement = document.getElementById('size')
+const colorElement = document.getElementById('color')
 
 let size = 20;
 let isCurrentlyPressed = false;
+let color = 'black';
 
 
 canvas.addEventListener('mousemove', (event) => {
@@ -36,6 +39,7 @@ increaseBtn.addEventListener('click', () => {
   if(size > 50) {
     size = 50;
   }
+  updateSizeOnScreen()
 })
 
 decreaseBtn.addEventListener('click', () => {
@@ -44,15 +48,22 @@ decreaseBtn.addEventListener('click', () => {
   if(size < 5){
     size = 5;
   }
+  updateSizeOnScreen()
+})
 
+colorElement.addEventListener('change', (event) => {
+  color = event.target.value
 })
 
 
 function drawCircle(x,y) {
   ctx.beginPath();
   ctx.arc(x, y, size, 0, Math.PI * 2)
   ctx.fill()
+  ctx.fillStyle = color;
 }
 
-
+function updateSizeOnScreen() {
+  sizeElement.innerText = size
+}
 

drawing-app/style.css

@@ -28,10 +28,14 @@ canvas {
   background-color: whitesmoke;
 }
 
-.toolbox button {
+.toolbox > * {
   background-color: rgb(238, 214, 186);
   padding: 0.25rem;
   border: none;
   font-size: 3rem;
   width: 50px;
+  height: 50px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }