08 - Basic line drawing

pbrdmn · pbrdmn · commit c1a45a991108 · 2018-04-03T22:08:30.000+10:00
diff --git a/08 - Fun with HTML5 Canvas/index.html b/08 - Fun with HTML5 Canvas/index.html
@@ -0,0 +1,53 @@
+<!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')
+    canvas.width = window.innerWidth
+    canvas.height = window.innerHeight
+
+    const context = canvas.getContext('2d')
+    context.strokeStyle = '#ff8800'
+    context.lineJoin = 'round'
+    context.lineCap = 'round'
+
+    let isDrawing = false
+    let last = { offsetX: 0, offsetY: 0 }
+
+    const draw = ({ offsetX: x, offsetY: y }) => {
+      if (!isDrawing) return
+      context.beginPath()
+      context.moveTo(last.x, last.y)
+      context.lineTo(x, y)
+      context.stroke()
+      last = { x, y }
+    }
+
+    const startDrawing = ({ offsetX: x, offsetY: y }) => {
+      last = { x, y }
+      isDrawing = true
+    }
+
+    canvas.addEventListener('mousemove', draw)
+    canvas.addEventListener('mousedown', startDrawing)
+    canvas.addEventListener('mouseup', () => isDrawing = false)
+    canvas.addEventListener('mouseout', () => isDrawing = false)
+  </script>
+
+  <style>
+    html,
+    body {
+      margin: 0;
+    }
+  </style>
+
+</body>
+
+</html>
