katbow
diff --git a/Collapse file
‎08 - Fun with HTML5 Canvas - Complete/index.html‎
Copy file name to clipboard
+12Lines changed: 12 additions & 0 deletions b/Collapse file
‎08 - Fun with HTML5 Canvas - Complete/index.html‎
Copy file name to clipboard
+12Lines changed: 12 additions & 0 deletions
diff --git a/Collapse file
‎08 - Fun with HTML5 Canvas - Complete/main.js‎
Copy file name to clipboard
+40Lines changed: 40 additions & 0 deletions b/Collapse file
‎08 - Fun with HTML5 Canvas - Complete/main.js‎
Copy file name to clipboard
+40Lines changed: 40 additions & 0 deletions
diff --git a/Collapse file
‎08 - Fun with HTML5 Canvas - Complete/style.css‎
Copy file name to clipboard
+3Lines changed: 3 additions & 0 deletions b/Collapse file
‎08 - Fun with HTML5 Canvas - Complete/style.css‎
Copy file name to clipboard
+3Lines changed: 3 additions & 0 deletions
diff --git a/Collapse file
‎08 - Fun with HTML5 Canvas/index-START.html‎
Copy file name to clipboardExpand all lines: 08 - Fun with HTML5 Canvas/index-START.html
-19Lines changed: 0 additions & 19 deletions b/Collapse file
‎08 - Fun with HTML5 Canvas/index-START.html‎
Copy file name to clipboardExpand all lines: 08 - Fun with HTML5 Canvas/index-START.html
-19Lines changed: 0 additions & 19 deletions
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>HTML5 Canvas</title>
+  <link rel="stylesheet" href="style.css" media="screen" title="no title">
+</head>
+<body>
+  <canvas id="draw" width="800" height="800"></canvas>
+  <script type="text/javascript" src="main.js"></script>
+</body>
+</html>
@@ -0,0 +1,40 @@
+const canvas = document.getElementById('draw')
+const context = canvas.getContext('2d')
+
+canvas.width = window.innerWidth
+canvas.height = window.innerHeight
+// context.strokeStyle = '#BADA55'
+context.lineJoin = 'round'
+context.lineCap = 'round'
+// context.lineWidth = 100
+context.globalCompositeOperation = 'destination-on'
+
+let isDrawing = false
+let lastX = 0
+let lastY = 0
+let hue = 0
+let direction = true
+
+function draw (e) {
+  if (!isDrawing) return
+  context.strokeStyle = `hsl(${hue}, 100%, 50%)`
+  context.beginPath()
+  context.moveTo(lastX, lastY)
+  context.lineTo(e.offsetX, e.offsetY)
+  context.stroke();
+  [lastX, lastY] = [e.offsetX, e.offsetY]
+  hue++
+  if (hue > 359) hue = 0
+  if (context.lineWidth >= 100 || context.lineWidth <= 1) {
+    direction = !direction
+  }
+  direction ? context.lineWidth++ : context.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)
@@ -0,0 +1,3 @@
+html, body {
+  margin:0;
+}