bgiobbe
diff --git a/Collapse file
‎08 - Fun with HTML5 Canvas/README.md‎
Copy file name to clipboard
+11Lines changed: 11 additions & 0 deletions
Display the source diff
Display the rich diff b/Collapse file
‎08 - Fun with HTML5 Canvas/README.md‎
Copy file name to clipboard
+11Lines changed: 11 additions & 0 deletions
Display the source diff
Display the rich diff
diff --git a/Collapse file
‎08 - Fun with HTML5 Canvas/index.html‎
Copy file name to clipboard
+79Lines changed: 79 additions & 0 deletions b/Collapse file
‎08 - Fun with HTML5 Canvas/index.html‎
Copy file name to clipboard
+79Lines changed: 79 additions & 0 deletions
@@ -0,0 +1,11 @@
+#Fun with HTML5 Canvas
+
+Draw with a rainbow pen on the canvas.
+
+- Hold primary mouse button down to draw.
+- Line width varies directly with mouse speed.
+- Double-click to erase the canvas.
+
+Have fun!
+
+
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>HTML5 Canvas</title>
+  <link rel="icon" href="https://fav.farm/🔥" />
+</head>
+
+<body>
+  <canvas id="draw" width="800" height="800"></canvas>
+
+  <script>
+
+    const canvas = document.querySelector('canvas');
+    const ctx = canvas.getContext('2d');
+
+    [canvas.width, canvas.height] = [window.innerWidth, window.innerHeight];
+    ctx.strokeStyle = 'crimson';
+    ctx.lineJoin = 'round';     // round, bevel, miter (default)
+    ctx.lineCap = 'round';      // butt (default), round, square
+
+    let isDrawing = false;
+    let [lastX, lastY] = [0, 0];
+    let hue = 0;
+    let saturation = 1;
+    let lightness = 5;
+
+    function draw(e) {
+      if (!isDrawing) return;
+
+      // set lineWidth based on mouse speed
+      if (e.movementX !== 0 || e.movementY !== 0) {
+        ctx.lineWidth = Math.sqrt(e.movementX ** 2 + e.movementY ** 2);
+      } else {
+        ctx.lineWidth = 1;
+      }
+      // rainbow pen
+      ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
+      // draw line
+      ctx.beginPath();
+      ctx.moveTo(lastX, lastY);
+      ctx.lineTo(e.offsetX, e.offsetY);
+      ctx.stroke();
+      [lastX, lastY] = [e.offsetX, e.offsetY];
+      hue = ++hue % 360;
+    }
+
+    canvas.addEventListener('mousedown', (e) => {
+      isDrawing = true;
+      [lastX, lastY] = [e.offsetX, e.offsetY];
+    });
+    canvas.addEventListener('mouseover', (e) => {
+      if (e.buttons & 1) isDrawing = true;
+      [lastX, lastY] = [e.offsetX, e.offsetY];
+    });
+    canvas.addEventListener('mousemove', draw);
+    canvas.addEventListener('mouseup', () => isDrawing = false);
+    canvas.addEventListener('mouseout', () => isDrawing = false);
+    // erase canvas on double-click
+    canvas.addEventListener('dblclick', () => {
+      ctx.reset();
+      ctx.lineJoin = 'round';
+      ctx.lineCap = 'round';
+
+    });
+
+  </script>
+
+  <style>
+    html,
+    body {
+      margin: 0;
+    }
+  </style>
+
+</body>
+
+</html>