Completed exercise 08

cwkosman · cwkosman · commit a968d3fcd1df · 2016-12-18T20:50:42.000-08:00
diff --git a/08 - Fun with HTML5 Canvas/index.html b/08 - Fun with HTML5 Canvas/index.html
@@ -0,0 +1,77 @@
+<!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 is like mspaint.
+//You draw on something called the context, not the canvas element itself
+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'; //like photoshop blend modes
+
+let isDrawing = false;
+let lastX = 0;
+let lastY = 0;
+let hue = 0;
+let direction = true;
+
+
+function draw(e) {
+  if(!isDrawing) return; //don't draw when not mousedown
+  console.log(e);
+  ctx.beginPath();
+  ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
+  //start from
+  ctx.moveTo(lastX,lastY);
+  ctx.lineTo(e.offsetX, e.offsetY);
+  ctx.stroke();
+  [lastX, lastY] = [e.offsetX, e.offsetY]; //es6 trick?
+  hue++;
+
+  if (hue>=360) {
+    hue = 0;
+  }
+
+ if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {
+  direction = !direction; //flip the direction
+ }
+
+  if(direction) {
+    ctx.lineWidth++;
+  } else {
+    ctx.lineWidth--;
+  }
+}
+
+
+
+canvas.addEventListener('mousedown', (e) => {
+  isDrawing = true; //A flag to be tested if ture or false. A common way of doing things
+  [lastX, lastY] = [e.offsetX, e.offsetY]; //update mouse position
+});
+
+canvas.addEventListener('mousemove', draw);
+canvas.addEventListener('mouseup', () => isDrawing = false);
+canvas.addEventListener('mouseout', () => isDrawing = false); //when the mouse leaves the screen
+
+</script>
+
+<style>
+  html, body {
+    margin:0;
+  }
+</style>
+
+</body>
+</html>
