canvas tutorial completed

mochibot · mochibot · commit c9946b86609a · 2019-05-26T22:50:30.000-07:00
diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
@@ -7,6 +7,57 @@
 <body>
 <canvas id="draw" width="800" height="800"></canvas>
 <script>
+  const canvas = document.querySelector('#draw');
+  const context = canvas.getContext('2d');   //can also do 3d
+
+  //resize canvas width and height (default set above)
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+  context.strokeStyle = '#BADA55';  //color for strokes
+  context.lineJoin = 'round';  //rounded corner when the 2 lines meet
+  context.lineCap = 'round';  //rounded corner at the end of line
+  context.lineWidth = 20; //make line thicker
+  context.globalCompositeOperation = 'multiply'; //blend over each other, but will eventually turn black
+
+  let isDrawing = false;  //flag for drawing
+  let lastX = 0;  //starting x value
+  let lastY = 0;  //starting y value
+  let hue = 0;
+  let direction = true;
+
+  function draw(e) {
+    if (!isDrawing) {
+      return;  //stop the function from running when not mouse down 
+    } 
+    context.strokeStyle = `hsl(${hue}, 100%, 50%)`;
+    context.beginPath();
+    context.moveTo(lastX, lastY);
+    context.lineTo(e.offsetX, e.offsetY);
+    context.stroke();
+    //set lastX and lastY so it does not always start from (0, 0)
+    [lastX, lastY] = [e.offsetX, e.offsetY] //destructuring 
+    hue++; 
+    if (hue >= 360) {
+      hue = 0;
+    }
+    if (context.lineWidth > 100 || context.lineWidth <= 1) {
+      direction = !direction;  //flip the direction
+    }
+    if (direction) {
+      context.lineWidth++;
+    } else {
+      context.lineWidth--;
+    }
+  }
+  canvas.addEventListener('mousedown', (event) => {
+    isDrawing = true;
+    //move mouse to the mousedown point so it does not start from (0, 0)
+    [lastX, lastY] = [event.offsetX, event.offsetY]
+  });
+  canvas.addEventListener('mousemove', draw);
+  canvas.addEventListener('mouseup', () => isDrawing = false);
+  canvas.addEventListener('mouseout', () => isDrawing = false);  //set to false when mouse leaves the window
+
 </script>
 
 <style>
diff --git a/08 - Fun with HTML5 Canvas/readme.md b/08 - Fun with HTML5 Canvas/readme.md
@@ -0,0 +1,9 @@
+Things learned
+- HTML5 canvas: container for graphics; must use JavaScript to actually draw graphics
+- To get canvas' 2D rendering context, call getContext() on <canvas> element and use '2d' as argument
+- methods:
+  .beginPath()  - create a new path
+  .moveTo()     - move starting point to new (x,y) coordinates
+  .lineTo()     - connect the last point to the specified (x, y) cooredinates with a straight line
+  .stroke()     - strokes the current sub-paths with current stroke style
+
