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);