Finished 08

Author: jdlawrence

08 - Fun with HTML5 Canvas/index-START.html

@@ -15,17 +15,53 @@
     canvas.width = window.innerWidth;
     canvas.height = window.innerHeight;
     ctx.strokeStyle = '#BADA55';
+    ctx.lineJoin = 'round';
     ctx.lineCap = 'round';
+    ctx.lineWidth = 100;
+    ctx.globalCompositeOperation = 'screen';
 
     let isDrawing = false;
+    let direction = true; 
     let lastX = 0;
     let lastY = 0;
+    let hue = 0;
 
     function draw(e) {
-      console.log('e', e);
+      if (!isDrawing) {
+        return;
+      }
+      ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
+      ctx.beginPath();
+      // start from: 
+      ctx.moveTo(lastX, lastY);
+      // go to: 
+      ctx.lineTo(e.offsetX, e.offsetY);
+      ctx.stroke();
+      [lastX, lastY] = [e.offsetX, e.offsetY];
+      if (hue > 360) hue = 0;
+      hue += 7;
+
+      if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {
+        direction = !direction;
+      }
+
+      if (direction) {
+        ctx.lineWidth+= 3;
+      } else {
+        ctx.lineWidth-= 3;
+      }
+
     }
 
+    canvas.addEventListener('mousedown', (e) => {
+      isDrawing = true
+      console.log('*', e);
+      [lastX, lastY] = [e.offsetX, e.offsetY];
+      console.log('x, y', lastX, lastY);
+    });
     canvas.addEventListener('mousemove', draw);
+    canvas.addEventListener('mouseup', () => isDrawing = false);
+    canvas.addEventListener('mouseout', () => isDrawing = false);
   </script>
 
   <style>