JS30 wesbos#8 completed

= · = · commit a96b39bd4a64 · 2021-06-27T17:59:23.000+05:30
diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
@@ -1,19 +1,67 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <title>HTML5 Canvas</title>
 </head>
+
 <body>
-<canvas id="draw" width="800" height="800"></canvas>
-<script>
-</script>
+  <canvas id="draw" width="800" height="800"></canvas>
+  <script>
+    const canvas = document.querySelector('#draw');
+    const ctx = canvas.getContext('2d');
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    ctx.strokeStyle = '#BADA55';
+    ctx.lineJoin = 'round';
+    ctx.lineCap = 'round';
+
+    let isDrawing = false;
+    let lastX = 0;
+    let lastY = 0;
+    let hue = 0;
+    let direction = false;
 
-<style>
-  html, body {
-    margin: 0;
-  }
-</style>
+    function draw(e) {
+      if (!isDrawing) return;
+      console.log(e);
+      ctx.strokeStyle = `hsl(${hue},100%,50%)`;
+      ctx.beginPath();
+      ctx.moveTo(lastX,lastY);
+      ctx.lineTo(e.offsetX,e.offsetY);
+      ctx.stroke();
+      [lastX,lastY] = [e.offsetX,e.offsetY];
+      hue++;
+      if(hue >= 360) {
+        hue = 0;
+      }
+      if(ctx.lineWidth>=100 || ctx.lineWidth<=1) {
+        direction = !direction;
+      }
+      if(direction) {
+        ctx.lineWidth++;
+      } else {
+        ctx.lineWidth--;
+      }
+    }
+
+    canvas.addEventListener('mousedown', (e) => {
+      isDrawing = true;
+      [lastX,lastY] = [e.offsetX,e.offsetY];
+    })
+    canvas.addEventListener('mousemove', draw);
+    canvas.addEventListener('mouseup', () => isDrawing = false)
+    canvas.addEventListener('mouseout', () => isDrawing = false)
+  </script>
+
+  <style>
+    html,
+    body {
+      margin: 0;
+    }
+  </style>
 
 </body>
-</html>
+
+</html>
