Finished project and added comments

Eric Lee · Eric Lee · commit 76cebcb7ef3b · 2016-12-21T00:08:43.000-06:00
diff --git a/08 - Fun with HTML5 Canvas/README.md b/08 - Fun with HTML5 Canvas/README.md
@@ -0,0 +1,18 @@
+# Goal:
+
+Learn how to use HTML5 Canvas.
+
+## Summary:
+
+Canvas has many features. Once you gain access to the canvas through querySelector, get the 2d context, and set the width and height, you can edit the attributes of ctx in order to edit and change the canvas.
+
+ctx.beginPath() - begins path, or resets to a new path
+ctx.moveTo(lastX, lastY) - moves the coordinates the path is to the given coordinates
+ctx.lineTo(e.offsetX, e.offsetY) - Creates a line to the given coordinate from the last asserted point
+ctx.stroke() - draws the path that is defined.
+ctx.lineWidth = 100 - change the width of the line.
+
+## One Thing Learned:
+
+The context of a contains all the information you need to change and edit, whether manually or through methods.
+
diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
@@ -7,6 +7,60 @@
 <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.globalCompositeOperation = 'multiply';
+
+let isDrawing = false;
+let lastX = 0;
+let lastY = 0;
+let hue = 0;
+let direction = true;
+
+ctx.lineWidth = 100;
+
+function draw(e) {
+	if (!isDrawing) return;
+
+	ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
+	// ctx.lineWidth = hue;
+	ctx.beginPath();
+	ctx.moveTo(lastX, lastY);
+	ctx.lineTo(e.offsetX, e.offsetY);
+	ctx.stroke();
+
+	[lastX, lastY] = [e.offsetX, e.offsetY];
+	hue++;
+	if(hue > 360) {
+		hue = 0;
+	}
+
+	if(ctx.lineWidth >=100 || ctx.lineWidth <= 1) {
+		direction = !direction;
+	}
+	if(direction) {
+		ctx.lineWidth++;
+	} else {
+		ctx.lineWidth--;
+	}
+	// lastX = e.offSetX;
+	// lastY = e.offSetY;
+}
+
+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>
