Day 8, draw functionality

Levii01 · Levii01 · commit fc2d2db5829d · 2018-11-04T18:40:10.000+01:00
diff --git a/08 - Fun with HTML5 Canvas/index.html b/08 - Fun with HTML5 Canvas/index.html
@@ -14,6 +14,7 @@
   ctx.strokeStyle = '#BADA55'
   ctx.lineJoin = 'round';
   ctx.lineCap = 'round';
+  ctx.lineWidth = 100;
 
   let isDrawing = false,
       lastX = 0,
@@ -22,10 +23,19 @@
   function draw(e) {
     if(!isDrawing) return;
     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('mousemove', draw)
-  canvas.addEventListener('mousedown', () => isDrawing = true)
+  canvas.addEventListener('mousedown', (e) => {
+    isDrawing = true;
+    [lastX, lastY] = [e.offsetX, e.offsetY];
+  })
   canvas.addEventListener('mouseup', () => isDrawing = false)
   canvas.addEventListener('mouseout', () => isDrawing = false)
 </script>
