having fun with HTML & canvas

corneliugaina · Jun 18, 2019 · 261076a · 261076a
1 parent 463d598
commit 261076a
Showing 1 changed file with 76 additions and 0 deletions.
diff --git a/8-html-with-canvas/index.html b/8-html-with-canvas/index.html
@@ -0,0 +1,76 @@
+<!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;
+        // ctx.globalCompositeOperation = 'multiply';
+
+        let isDrawing = false;
+        let lastX = 0;
+        let lastY = 0;
+        let hue = 0;
+        let direction = true;
+
+        function draw(e) {
+            if(!isDrawing) return; // stop the fn from running when they are not moused down 
+            console.log(e);
+            ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
+            ctx.lineWidth = hue;
+            ctx.beginPath();
+
+            // start from
+            ctx.moveTo(lastX, lastY);
+
+            // go to 
+            ctx.lineTo(e.offsetX, e.offsetY);
+            ctx.stroke();
+            [lastX, lastY] = [e.offsetX, e.offsetY]
+            hue++;
+            if(hue >= 360) {
+                hue = 0;
+            }
+            if(ctx.lineWidth >= 500 || ctx.lineWidth <= 1) {
+                direction = !direction;
+            }
+
+            if(direction) {
+                ctx.lineWidth++;
+            } else {
+                ctx.lineWidth--;
+            }
+        }
+
+    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>