From 8a9968840a3aa37462cb4c80140fcf09a3da06a6 Mon Sep 17 00:00:00 2001
From: Nate Clark <natec425@gmail.com>
Date: Tue, 26 Feb 2019 10:35:27 -0600
Subject: [PATCH] Replace isDrawing with event listener swapping

---
 08 - Fun with HTML5 Canvas/index-FINISHED.html | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/08 - Fun with HTML5 Canvas/index-FINISHED.html b/08 - Fun with HTML5 Canvas/index-FINISHED.html
index f2c9b120fe..998645956a 100644
--- a/08 - Fun with HTML5 Canvas/index-FINISHED.html	
+++ b/08 - Fun with HTML5 Canvas/index-FINISHED.html	
@@ -17,15 +17,12 @@
 ctx.lineWidth = 100;
 // ctx.globalCompositeOperation = 'multiply';
 
-let isDrawing = false;
 let lastX = 0;
 let lastY = 0;
 let hue = 0;
 let direction = true;
 
 function draw(e) {
-  if (!isDrawing) return; // stop the fn from running when they are not moused down
-  console.log(e);
   ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
   ctx.beginPath();
   // start from
@@ -52,14 +49,16 @@
 }
 
 canvas.addEventListener('mousedown', (e) => {
-  isDrawing = true;
   [lastX, lastY] = [e.offsetX, e.offsetY];
+
+  canvas.addEventListener('mousemove', draw);
 });
 
+const stopDrawing = () =>
+  canvas.removeEventListener('mousemove', draw)
 
-canvas.addEventListener('mousemove', draw);
-canvas.addEventListener('mouseup', () => isDrawing = false);
-canvas.addEventListener('mouseout', () => isDrawing = false);
+canvas.addEventListener('mouseup', stopDrawing);
+canvas.addEventListener('mouseout', stopDrawing);
 
 </script>