feat: clear drawings

Author: kyvycodes

drawing-app/index.html

@@ -14,5 +14,6 @@
     <span id='size'>30</span>
     <button id='decrease'>-</button>
     <input type='color' id='color' />
+    <button id='clear'>🧼</button>
   </div>
 </html>

drawing-app/script.js

@@ -7,6 +7,8 @@ const increaseBtn = document.getElementById('increase')
 const decreaseBtn = document.getElementById('decrease')
 const sizeElement = document.getElementById('size')
 const colorElement = document.getElementById('color')
+const clearBtn = document.getElementById('clear')
+
 
 let size = 20;
 let isCurrentlyPressed = false;
@@ -88,3 +90,6 @@ function updateSizeOnScreen() {
   sizeElement.innerText = size
 }
 
+clearBtn.addEventListener('click', () => {
+  ctx.clearRect(0, 0, canvas.width, canvas.height)
+})

drawing-app/style.css

@@ -41,3 +41,7 @@ canvas {
   align-items: center;
   justify-content: center;
 }
+
+.toolbox > *:last-child {
+  margin-left: auto;
+}