feat: canavs linestroke

Author: kyvycodes

drawing-app/script.js

@@ -11,24 +11,35 @@ const colorElement = document.getElementById('color')
 let size = 20;
 let isCurrentlyPressed = false;
 let color = 'black';
+let x = undefined;
+let y = undefined
 
 
 canvas.addEventListener('mousemove', (event) => {
 
   if(isCurrentlyPressed){
-      const x = event.offsetX;
-      const y = event.offsetY;
+      const x2 = event.offsetX;
+      const y2 = event.offsetY;
 
-      drawCircle(x,y)
+      drawCircle(x2, y2)
+      drawLine(x, y, x2, y2);
+      x = x2;
+      y = y2;
   }
 })
 
 canvas.addEventListener('mouseup', (event) => {
   isCurrentlyPressed = false
+
+  x = undefined
+  y = undefined
 })
 
 canvas.addEventListener('mousedown', (event) => {
   isCurrentlyPressed = true
+
+  x = event.offsetX;
+  y = event.offsetY;
 })
 
 
@@ -63,6 +74,16 @@ function drawCircle(x,y) {
   ctx.fillStyle = color;
 }
 
+
+function drawLine(x1, y1, x2, y2) {
+  ctx.beginPath();
+  ctx.moveTo(x1, y1)
+  ctx.lineTo(x2, y2)
+  ctx.strokeStyle = color;
+  ctx.lineWidth = size;
+  ctx.stroke()
+}
+
 function updateSizeOnScreen() {
   sizeElement.innerText = size
 }

drawing-app/style.css

@@ -26,15 +26,17 @@ canvas {
   padding: 1rem;
   width: 800px;
   background-color: whitesmoke;
+  display: flex;
 }
 
 .toolbox > * {
   background-color: rgb(238, 214, 186);
   padding: 0.25rem;
   border: none;
-  font-size: 3rem;
+  font-size: 2rem;
   width: 50px;
   height: 50px;
+  margin: .2rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;