wesbos
diff --git a/‎08 - Fun with HTML5 Canvas/index-START.html‎
Lines changed: 45 additions & 9 deletions b/‎08 - Fun with HTML5 Canvas/index-START.html‎
Lines changed: 45 additions & 9 deletions
@@ -1,19 +1,55 @@
 <!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
 
-<style>
-  html, body {
-    margin:0;
-  }
-</style>
+    function draw(e) {
+      if (!isDrawing) return // get out of this function if we aren't in drawing mode.
+      console.log(e);
+      ctx.beginPath();
+      ctx.moveTo(lastX, lastY);
+      ctx.lineTo(e.offsetX, e.offsetY);
+      ctx.stroke();
+      [lastX, lastY] = [e.offsetX, e.offsetY];
+    }
+
+    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>