diff --git a/08 - Fun with HTML5 Canvas/changi.html b/08 - Fun with HTML5 Canvas/changi.html
new file mode 100644
index 0000000..1674ac2
--- /dev/null
+++ b/08 - Fun with HTML5 Canvas/changi.html	
@@ -0,0 +1,83 @@
+<!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>
+      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";
+      ctx.lineWidth = 100;
+
+      let last = {
+        x: 0,
+        y: 0,
+      };
+      let isDrawing = false;
+      let hue = 0;
+      let direction = true;
+
+      canvas.addEventListener("mousemove", (evt) => {
+        if (!isDrawing) {
+          return;
+        }
+
+        ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
+        ctx.beginPath();
+        ctx.moveTo(last.x, last.y);
+        ctx.lineTo(evt.offsetX, evt.offsetY);
+        ctx.stroke();
+        // ctx.globalCompositeOperation = 'multiply';
+        // https://developer.mozilla.org/ko/docs/Web/HTML/Canvas/Tutorial/Compositing
+
+        last = {
+          x: evt.offsetX,
+          y: evt.offsetY,
+        };
+
+        hue = (hue + 1) % 360;
+
+        if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {
+          direction = !direction;
+        }
+        if (direction) {
+          ctx.lineWidth++;
+        } else {
+          ctx.lineWidth--;
+        }
+      });
+
+      canvas.addEventListener("mousedown", (evt) => {
+        isDrawing = true;
+        last = {
+          x: evt.offsetX,
+          y: evt.offsetY,
+        };
+      });
+
+      canvas.addEventListener("mouseup", (evt) => {
+        isDrawing = false;
+      });
+
+      canvas.addEventListener("mouseout", (evt) => {
+        isDrawing = false;
+      });
+    </script>
+
+    <style>
+      html,
+      body {
+        margin: 0;
+      }
+    </style>
+  </body>
+</html>
