@@ -5,15 +5,68 @@
   <title>HTML5 Canvas</title>
 </head>
 <body>
-<canvas id="draw" width="800" height="800"></canvas>
-<script>
-</script>
+  <h1>Draw on me!</h1>
+  <canvas id="draw" width="800" height="800"></canvas>
+  <script>
 
-<style>
-  html, body {
-    margin:0;
+  let isDrawing = false; // flag to know when mouse is actually clicked down
+  let lastX = 0;
+  let lastY = 0;
+  let hue = 0; // 0-360, resets after 360
+  let direction = true;
+
+  const canvas = document.querySelector('#draw');
+  const ctx = canvas.getContext('2d'); // where we do all drawing
+  // resize the canvas
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+  // set paintbrush settings
+  ctx.strokeStyle = '#BADA55';
+  ctx.lineJoin = 'round';
+  ctx.lineCap = 'round';
+  ctx.lineWidth = 10;
+  // ctx.globalCompositeOperation = 'multiply'; // subtract, lighten etc
+
+  function draw(event) {
+    if (!isDrawing) {
+      return; // don't run when not moused down
+    }
+    // paint color
+    ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`; // hue, saturation, lightness
+
+    ctx.beginPath();
+    ctx.moveTo(lastX, lastY);
+    ctx.lineTo(event.offsetX, event.offsetY);
+    ctx.stroke(); // actually draw
+
+    [lastX, lastY] = [event.offsetX, event.offsetY];
+    hue++;
+    // increment paint size from 0-100, then back down to 1
+    if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {
+      direction = !direction; // flip direction
+    }
+    if (direction) {
+      ctx.lineWidth++;
+    } else {
+      ctx.lineWidth--;
+    }
   }
-</style>
+
+  canvas.addEventListener('mousedown', (e) => {
+    isDrawing = true;
+    [lastX, lastY] = [e.offsetX, e.offsetY];
+  });
+  canvas.addEventListener('mouseup', () => isDrawing = false);
+  canvas.addEventListener('mouseout', () => isDrawing = false);
+  canvas.addEventListener('mousemove', draw);
+
+  </script>
+
+  <style>
+    html, body {
+      margin:0;
+    }
+  </style>
 
 </body>
 </html>